<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset="utf-8">
    
    <title>睡不醒的黑客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="兴趣使然的前端博客">
<meta property="og:type" content="website">
<meta property="og:title" content="睡不醒的黑客">
<meta property="og:url" content="https://hq229075284.github.io/blog/index.html">
<meta property="og:site_name" content="睡不醒的黑客">
<meta property="og:description" content="兴趣使然的前端博客">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="HanQ">
<meta name="twitter:card" content="summary">
    

    

    

    
<link rel="stylesheet" href="/blog/libs/font-awesome/css/font-awesome.min.css">

    
<link rel="stylesheet" href="/blog/libs/open-sans/styles.css">

    
<link rel="stylesheet" href="/blog/libs/source-code-pro/styles.css">


    
<link rel="stylesheet" href="/blog/css/style.css">


    
<script src="/blog/libs/jquery/2.1.3/jquery.min.js"></script>

    
    
        
<link rel="stylesheet" href="/blog/libs/lightgallery/css/lightgallery.min.css">

    
    
        
<link rel="stylesheet" href="/blog/libs/justified-gallery/justifiedGallery.min.css">

    
    
    
    
        <script>
var _hmt = _hmt || [];
(function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?c5e2de02c4aac83227b728f6dc16f902";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();
</script>

    


<meta name="generator" content="Hexo 4.2.1"></head>

<body>
    <div id="container">
        <header id="header">
    <div id="header-main" class="header-inner">
        <div class="outer">
            <a href="/blog/" id="logo">
                <i class="logo"></i>
                <span class="site-title">睡不醒的黑客</span>
            </a>
            <nav id="main-nav">
                
                    <a class="main-nav-link" href="/blog/.">首页</a>
                
                    <a class="main-nav-link" href="/blog/archives">归档</a>
                
                    <a class="main-nav-link" href="/blog/github">GitHub仓库</a>
                
            </nav>
            
                
                <nav id="sub-nav">
                    <div class="profile" id="profile-nav">
                        <a id="profile-anchor" href="javascript:;">
                            <img class="avatar" src="/blog/images/IMG_0049.JPG" />
                            <i class="fa fa-caret-down"></i>
                        </a>
                    </div>
                </nav>
            
            <div id="search-form-wrap">

    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
        <button type="submit" class="search-form-submit"></button>
    </form>
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="想要查找什么..." />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/blog/',
        CONTENT_URL: '/blog/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/blog/js/insight.js"></script>


</div>
        </div>
    </div>
    <div id="main-nav-mobile" class="header-sub header-inner">
        <table class="menu outer">
            <tr>
                
                    <td><a class="main-nav-link" href="/blog/.">首页</a></td>
                
                    <td><a class="main-nav-link" href="/blog/archives">归档</a></td>
                
                    <td><a class="main-nav-link" href="/blog/github">GitHub仓库</a></td>
                
                <td>
                    
    <div class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
    </div>

                </td>
            </tr>
        </table>
    </div>
</header>

        <div class="outer">
            
                

<aside id="profile">
    <div class="inner profile-inner">
        <div class="base-info profile-block">
            <img id="avatar" src="/blog/images/IMG_0049.JPG" />
            <h2 id="name">HanQ</h2>
            <h3 id="title">Web Developer &amp; Node Developer</h3>
            <span id="location"><i class="fa fa-map-marker"></i>HangZhou, China</span>
            <a id="follow" target="_blank" href="https://github.com/hq229075284">关注我</a>
        </div>
        <div class="article-info profile-block">
            <div class="article-info-block">
                27
                <span>文章</span>
            </div>
            <div class="article-info-block">
                8
                <span>标签</span>
            </div>
        </div>
        
        <div class="profile-block social-links">
            <table>
                <tr>
                    
                    
                    <td>
                        <a href="https://github.com/hq229075284" target="_blank" title="github" >
                            <i class="fa fa-github"></i>
                        </a>
                    </td>
                    
                </tr>
            </table>
        </div>
        
    </div>
</aside>

            
            <section id="main" >
    <article id="post-notes" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2022/08/notes/">notes</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2022/08/notes/">
            <time datetime="2022-08-31T01:14:15.551Z" itemprop="datePublished">2022-08-31</time>
        </a>
    </div>


                        
                        
                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            <p><h1 id="杂记"><a href="#杂记" class="headerlink" title="杂记"></a>杂记</h1><!-- TOC -->

<ul>
<li><a href="#%E6%9D%82%E8%AE%B0">杂记</a><ul>
<li><a href="#white-space%E8%A1%A8%E7%8E%B0%E5%BD%A2%E5%BC%8F">white-space表现形式</a></li>
<li><a href="#terset%E9%85%8D%E7%BD%AE">terset配置</a></li>
<li><a href="#mutationobserver%E6%B3%A8%E6%84%8F%E7%82%B9">MutationObserver注意点</a></li>
<li><a href="#%E5%AE%B9%E5%99%A8%E5%87%BA%E7%8E%B0%E6%BB%9A%E5%8A%A8%E6%9D%A1%E6%97%B6%E5%AD%90%E5%AE%B9%E5%99%A8%E7%9A%84%E5%AE%BD%E5%BA%A6%E6%98%AF%E5%90%A6%E5%9B%A0%E4%B8%BA%E6%BB%9A%E5%8A%A8%E6%9D%A1%E8%80%8C%E6%94%B9%E5%8F%98">容器出现滚动条时，子容器的宽度是否因为滚动条而改变</a></li>
<li><a href="#webpack-%E5%A4%9A%E7%BA%BF%E7%A8%8B%E5%92%8Ccache%E4%BC%98%E5%8C%96">webpack 多线程和cache优化</a></li>
<li><a href="#%E5%85%B6%E4%BB%96%E8%AE%B0%E5%BD%95-%E4%BB%A5%E5%90%8E%E5%88%86%E7%B1%BB">其他记录-以后分类</a></li>
</ul>
</li>
</ul>
<!-- /TOC -->

<h2 id="white-space表现形式"><a href="#white-space表现形式" class="headerlink" title="white-space表现形式"></a>white-space表现形式</h2><table>
<thead>
<tr>
<th>white-space👇</th>
<th>空格(<code> </code>)</th>
<th>非断空格(<code>&amp;nbsp;</code>)</th>
<th>换行符(<code>\n</code>)</th>
</tr>
</thead>
<tbody><tr>
<td>normal</td>
<td>保留1个空格，或者在多空格的时候仅保留1个空格</td>
<td>全部非断空格都保留</td>
<td>表现为1个空格，不换行</td>
</tr>
<tr>
<td>pre</td>
<td>保留全部的空格</td>
<td>全部非断空格都保留</td>
<td>会换行，但当文本溢出容器时不会自动换行</td>
</tr>
<tr>
<td>pre-line</td>
<td>保留1个空格，或者在多空格的时候仅保留1个空格</td>
<td>全部非断空格都保留</td>
<td>会换行</td>
</tr>
<tr>
<td>pre-wrap</td>
<td>保留全部的空格</td>
<td>全部非断空格都保留</td>
<td>会换行</td>
</tr>
<tr>
<td>no-wrap</td>
<td>保留1个空格，或者在多空格的时候仅保留1个空格</td>
<td>全部非断空格都保留</td>
<td>表现为1个空格，不换行</td>
</tr>
</tbody></table></p>
            <p class="article-more-link">
                <a href="/blog/2022/08/notes/#more">查看更多</a>
            </p>
        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2022/08/notes/" data-id="cl7gxerd30000o4tl5nal9xnn" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-css-grid" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
            
	
		<a href="/blog/2022/04/css-grid/" itemprop="url">
            <img src="https://s1.ax1x.com/2022/04/15/L8yHat.jpg" class="article-banner" style="object-fit: cover;"/>
        </a>
	



        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2022/04/css-grid/">Grid</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2022/04/css-grid/">
            <time datetime="2022-04-15T16:11:20.000Z" itemprop="datePublished">2022-04-15</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/blog/categories/css/">css</a>
    </div>

                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/blog/tags/css/" rel="tag">css</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <h1 id="css-grid（手机自带浏览器和webview，以及非IE的主流桌面浏览器）"><a href="#css-grid（手机自带浏览器和webview，以及非IE的主流桌面浏览器）" class="headerlink" title="css-grid（手机自带浏览器和webview，以及非IE的主流桌面浏览器）"></a>css-grid（手机自带浏览器和webview，以及非IE的主流桌面浏览器）</h1><p><a href="https://replit.com/@hq229075284/grid#index.html" target="_blank" rel="noopener">demo</a></p>
<h2 id="网格"><a href="#网格" class="headerlink" title="网格"></a>网格</h2><blockquote>
<p>⚠👇 以下显式网格、隐式网格暂不考虑溢出的情况</p>
</blockquote>
<h3 id="显式网格"><a href="#显式网格" class="headerlink" title="显式网格"></a>显式网格</h3><ul>
<li>grid-template-columns：指定显式网格列的数量和列宽</li>
<li>gird-template-rows：指定显式网格行的数量和行高</li>
</ul>
<p>grid-template-columns和gird-template-rows所构成的网格为显式网格，其它额外创建的网格为隐式网格</p>
<ol>
<li>网格容器宽度固定时<ol>
<li>网格宽度为固定值，该列的列宽等于这个固定值</li>
<li>网格宽度为n<code>fr</code>时，该列的列宽为<code>容器宽度-固定网格宽度</code>后被列等分后的n份</li>
</ol>
</li>
<li>网格容器高度固定时，<ol>
<li>网格高度为固定值，该行的行高等于这个固定值</li>
<li>网格高度为n<code>fr</code>时，网格的行高为<code>容器高度-固定网格高度</code>后被行等分后的n份</li>
</ol>
</li>
<li>网格容器未指定高度时，显式网格内的网格高度由同行内容高度最高的网格决定</li>
<li>网格容器未指定宽度且不超过父级元素宽度时，所有网格宽度由所有网格中内容宽度最大的网格决定</li>
</ol>
<h3 id="隐式网格"><a href="#隐式网格" class="headerlink" title="隐式网格"></a>隐式网格</h3><ul>
<li><p>grid-auto-columns：指定隐式网格的列宽</p>
</li>
<li><p>grid-auto-rows：指定隐式网格的行高</p>
</li>
</ul>
<ol>
<li>容器大小固定时，网格大小按网格容器等分计算，同<code>显式网格的1和2</code></li>
<li>容器大小不固定时，同<code>显式网格的3和4</code></li>
</ol>
<h3 id="显示-隐式混合同时存在于网格容器中"><a href="#显示-隐式混合同时存在于网格容器中" class="headerlink" title="显示/隐式混合同时存在于网格容器中"></a>显示/隐式混合同时存在于网格容器中</h3><p>若网格容器内同时存在隐式网格和显式网格：</p>
<ol>
<li>容器大小固定时，所有网格的宽度计算同<code>显式网格的1</code>，隐式网格高度计算同<code>显式网格的3</code>，显式网格的高度计算是在网格容器高度减去隐式网格占用高度后剩余高度的基础上，进行同<code>显式网格的2</code></li>
<li>容器大小不固定时，同<code>显式网格的3和4</code></li>
</ol>
<h2 id="fr"><a href="#fr" class="headerlink" title="fr"></a><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#fr_%E5%8D%95%E4%BD%8D" target="_blank" rel="noopener">fr</a></h2><p><code>fr</code>单位表示网格布局前，扣除明确的使用空间（如：500px）后，剩余可用空间被等分后的一份</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.grid</span>&#123;</span><br><span class="line">    grid-template-columns: 500px 1fr 2fr; // 计算方式 =&gt; (width - 500px)/(1fr + 2fr)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="minmax"><a href="#minmax" class="headerlink" title="minmax"></a>minmax</h2><p>网格行高或列宽的大小限定区间</p>
<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><ul>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout" target="_blank" rel="noopener">网格布局的基本概念</a></li>
</ul>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2022/04/css-grid/" data-id="cl7gxerh20016o4tlaw0abglq" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-css优先级" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2022/04/css%E4%BC%98%E5%85%88%E7%BA%A7/">css选择器和style属性的权值计算和比较</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2022/04/css%E4%BC%98%E5%85%88%E7%BA%A7/">
            <time datetime="2022-04-15T16:11:10.000Z" itemprop="datePublished">2022-04-15</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/blog/categories/css/">css</a>
    </div>

                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/blog/tags/css/" rel="tag">css</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            <p><p><a href="https://drafts.csswg.org/selectors/#specificity-rules" target="_blank" rel="noopener">16. Calculating a selector’s specificity</a></p>
<p><img src="https://s1.ax1x.com/2022/04/15/L8eZRJ.png"></p>
<p><a href="https://www.w3.org/TR/CSS21/cascade.html#specificity" target="_blank" rel="noopener">6.4.3 Calculating a selector’s specificity</a></p>
<p><img src="https://s1.ax1x.com/2022/04/15/L8eqyR.png"></p>
<h2 id="误区"><a href="#误区" class="headerlink" title="误区"></a>误区</h2><p><a href="https://www.runoob.com/w3cnote/css-style-priority.html" target="_blank" rel="noopener">在学习过程中，你可能发现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。这种说法其实是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 &gt; 100，应该应用前者的样式，然而事实是应用后者的样式。错误的原因是：权重的进制是并不是十进制，CSS 权重进制在 IE6 为 256，后来扩大到了 65536，现代浏览器则采用更大的数量。。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100， 你可以理解为 99.99，所以最终应用后者样式。</a></p></p>
            <p class="article-more-link">
                <a href="/blog/2022/04/css%E4%BC%98%E5%85%88%E7%BA%A7/#more">查看更多</a>
            </p>
        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2022/04/css%E4%BC%98%E5%85%88%E7%BA%A7/" data-id="cl7gxerh4001ao4tl88fn49fu" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-border-image-slice" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
            
	
		<a href="/blog/2022/01/border-image-slice/" itemprop="url">
            <img src="https://www.wangzhanchengxu.com/uploadfile/2017/0325/20170325114208581.gif" class="article-banner" style="object-fit: cover;"/>
        </a>
	



        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2022/01/border-image-slice/">border-image-slice</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2022/01/border-image-slice/">
            <time datetime="2022-01-13T16:55:16.000Z" itemprop="datePublished">2022-01-13</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/blog/categories/css/">css</a>
    </div>

                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/blog/tags/css/" rel="tag">css</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <p>border-image-slice将元素区域（border-box）分割成9个区域，其中8个区域分别对应构成border的8个区域。<br>每个由borderr-image-slice划分的区域内的图像将被渲染到对应的border区域中。</p>
<p>如下图：<br><img src="/blog/IMG_0452.JPG" alt="示意图"></p>
<p>假如border-image-slice的值为<code>40 60</code>，表示垂直距离为40px，水平距离为60px，区域<code>1</code>的大小为60x40（长*宽），内中渲染对应区域的图像。</p>
<p>假如border的值为<code>20</code>，表示border-top-width为20px，border-left-width为20px，区域<code>1</code>的大小为20x20（长*宽），内中渲染的图像为border-image-slice划分区域中的区域<code>1</code>内的图像。</p>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2022/01/border-image-slice/" data-id="cl7gxerh20014o4tldp1707yo" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-css主题化" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2021/12/css%E4%B8%BB%E9%A2%98%E5%8C%96/">css主题化</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2021/12/css%E4%B8%BB%E9%A2%98%E5%8C%96/">
            <time datetime="2021-12-01T16:10:24.000Z" itemprop="datePublished">2021-12-01</time>
        </a>
    </div>


                        
                        
                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            <p><h1 id="css主题化（use-Less）"><a href="#css主题化（use-Less）" class="headerlink" title="css主题化（use Less）"></a>css主题化（use Less）</h1><ol>
<li><p>使用css var（全局变量）</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 当给定值未定义时将会用备用值替换</span></span><br><span class="line"><span class="variable">@font-size:</span>var(--theme-font-size,<span class="number">36px</span>);</span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">:root</span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties#%E6%9C%89%E6%95%88%E6%80%A7%E5%92%8C%E5%80%BC</span></span><br><span class="line"><span class="comment">计算时有效性</span></span><br><span class="line"><span class="comment">1. 检查属性 color 是否为继承属性。是，但是 &lt;p&gt; 没有任何父元素定义了 color 属性。转到下一步。</span></span><br><span class="line"><span class="comment">2. 将该值设置为它的默认初始值，比如 black。</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="selector-tag">body</span>&#123;</span><br><span class="line">  <span class="attribute">font-size</span>:<span class="number">20PX</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#app</span>&#123;</span><br><span class="line">  <span class="attribute">font-size</span>:<span class="variable">@font-size</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>脚本改变css变量的值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">changeTheme</span>(<span class="params">n</span>)</span>&#123;</span><br><span class="line">  <span class="built_in">document</span>.documentElement.style.setProperty(<span class="string">'--theme-font-size'</span>,n+<span class="string">'px'</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
            <p class="article-more-link">
                <a href="/blog/2021/12/css%E4%B8%BB%E9%A2%98%E5%8C%96/#more">查看更多</a>
            </p>
        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2021/12/css%E4%B8%BB%E9%A2%98%E5%8C%96/" data-id="cl7gxerh00010o4tlcc5n0oxo" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-glob-match" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
            
	
		<a href="/blog/2021/05/glob-match/" itemprop="url">
            <img src="https://i.postimg.cc/9XBBfbx8/oh-my-glob.gif" class="article-banner" style="object-fit: cover;"/>
        </a>
	



        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2021/05/glob-match/">glob_match</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2021/05/glob-match/">
            <time datetime="2021-05-13T12:50:08.000Z" itemprop="datePublished">2021-05-13</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/blog/categories/shell/">shell</a>
    </div>

                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/blog/tags/glob/" rel="tag">glob</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <h1 id="glob-match总结（bash下）"><a href="#glob-match总结（bash下）" class="headerlink" title="glob match总结（bash下）"></a>glob match总结（bash下）</h1><ul>
<li><code>*</code>匹配任意数量的非<code>/</code>字符</li>
<li><code>?</code> 仅匹配一个非<code>/</code>字符</li>
<li><code>**</code>匹配任意数量的非<code>/</code>字符，而且当它独立构成匹配模式中的一段时，也可以匹配<code>/</code>，在<code>bash</code>下要开启<code>globstar</code>,<code>shopt -s globstar</code></li>
<li><code>[...]</code>匹配<code>[]</code>之间的字符，存在范围匹配时，需要在bash下需开启<code>globasciiranges</code>，保证大小写匹配的正常；[^…] 或 [!…]匹配不包括在<code>[]</code>内的字符；可以通过<code>[:class:]</code>使用POSIX标准的匹配关键词：<code>alnum</code> 、<code>alpha</code>、<code>ascii</code> 、<code>blank</code>、<code>cntrl</code>、<code>digit</code>、<code>graph</code>、<code>lower</code>、<code>print</code>、<code>punct</code>、<code>space</code>、<code>upper</code>、<code>word</code>、<code>xdigit</code>，<code>word</code> 匹配字符、数字和<code>_</code></li>
<li>多模式匹配及反选<ul>
<li>?(pattern|pattern|…)：匹配0个或1个pattern</li>
<li>*(pattern|pattern|…)：匹配0个或以上的pattern</li>
<li>+(pattern|pattern|…)：匹配1个或以上pattern</li>
<li>@(pattern|pattern|…)：匹配其中1个pattern，测试效果和<code>+(pattern|pattern|...)</code>相似（<strong>需进一步研究区别</strong>）</li>
<li>!(pattern|pattern|…)：不匹配任一pattern</li>
</ul>
</li>
</ul>
<blockquote>
<p>参考：<code>man bash</code>下的<strong>Pattern Matching</strong>部分</p>
</blockquote>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2021/05/glob-match/" data-id="cl7gxergz000zo4tla2nz1cvn" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-原码、反码、补码" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
            
	
		<a href="/blog/2021/04/%E5%8E%9F%E7%A0%81%E3%80%81%E5%8F%8D%E7%A0%81%E3%80%81%E8%A1%A5%E7%A0%81/" itemprop="url">
            <img src="https://i.postimg.cc/43dbyMfM/encode.jpg" class="article-banner" style="object-fit: cover;"/>
        </a>
	



        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2021/04/%E5%8E%9F%E7%A0%81%E3%80%81%E5%8F%8D%E7%A0%81%E3%80%81%E8%A1%A5%E7%A0%81/">原码、反码、补码</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2021/04/%E5%8E%9F%E7%A0%81%E3%80%81%E5%8F%8D%E7%A0%81%E3%80%81%E8%A1%A5%E7%A0%81/">
            <time datetime="2021-04-23T17:35:26.000Z" itemprop="datePublished">2021-04-23</time>
        </a>
    </div>


                        
                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/blog/tags/%E8%AE%A1%E7%AE%97%E5%99%A8%E5%8E%9F%E7%90%86/" rel="tag">计算器原理</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            <p><h1 id="原码、反码、补码"><a href="#原码、反码、补码" class="headerlink" title="原码、反码、补码"></a>原码、反码、补码</h1><h2 id="原码"><a href="#原码" class="headerlink" title="原码"></a>原码</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1   &#x3D;&gt; 00000001</span><br><span class="line">1   &#x3D;&gt; 00000010</span><br><span class="line">-1  &#x3D;&gt; 10000001</span><br></pre></td></tr></table></figure>

<p>当一个正数与一个负数的原码做加法时：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">1 + (-1)</span><br><span class="line">  00000001</span><br><span class="line">+ 10000001</span><br><span class="line">-----------</span><br><span class="line">  10000010</span><br><span class="line">  </span><br><span class="line">10000010 &#x3D;&gt; -2 &#x2F;&#x2F; 按原码的方式转化为十进制</span><br><span class="line"></span><br><span class="line">2 + (-1)</span><br><span class="line">  00000010</span><br><span class="line">+ 10000001</span><br><span class="line">-----------</span><br><span class="line">  10000011</span><br><span class="line">  </span><br><span class="line">10000011 &#x3D;&gt; -3 &#x2F;&#x2F; 按原码的方式转化为十进制</span><br></pre></td></tr></table></figure>

<p>异号数字的原码相加，原码的符号位一定为1，和实际情况不服，比如： 2 + -1。</p></p>
            <p class="article-more-link">
                <a href="/blog/2021/04/%E5%8E%9F%E7%A0%81%E3%80%81%E5%8F%8D%E7%A0%81%E3%80%81%E8%A1%A5%E7%A0%81/#more">查看更多</a>
            </p>
        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2021/04/%E5%8E%9F%E7%A0%81%E3%80%81%E5%8F%8D%E7%A0%81%E3%80%81%E8%A1%A5%E7%A0%81/" data-id="cl7gxergy000uo4tldn3m30sq" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-es6-es11" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2020/11/es6-es11/">es6-es11</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2020/11/es6-es11/">
            <time datetime="2020-11-11T13:28:10.000Z" itemprop="datePublished">2020-11-11</time>
        </a>
    </div>


                        
                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/blog/tags/es/" rel="tag">es</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <!-- markdownlint-disable MD025-->
<h1 id="ECMAScript版本"><a href="#ECMAScript版本" class="headerlink" title="ECMAScript版本"></a>ECMAScript版本</h1><table>
<thead>
<tr>
<th>编年版</th>
<th>简版</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>ECMAScript2015</td>
<td>ECMAScript6</td>
<td>-</td>
</tr>
<tr>
<td><a href="#ECMAScript2016">ECMAScript2016</a></td>
<td><a href="#ECMAScript2016">ECMAScript7</a></td>
<td>-</td>
</tr>
<tr>
<td><a href="#ECMAScript2017">ECMAScript2017</a></td>
<td><a href="#ECMAScript2017">ECMAScript8</a></td>
<td>-</td>
</tr>
<tr>
<td><a href="#ECMAScript2018">ECMAScript2018</a></td>
<td><a href="#ECMAScript2018">ECMAScript9</a></td>
<td>-</td>
</tr>
<tr>
<td><a href="#ECMAScript2019">ECMAScript2019</a></td>
<td><a href="#ECMAScript2019">ECMAScript10</a></td>
<td>-</td>
</tr>
<tr>
<td><a href="#ECMAScript2020">ECMAScript2020</a></td>
<td><a href="#ECMAScript2020">ECMAScript11</a></td>
<td>-</td>
</tr>
<tr>
<td><a href="#ECMAScript2021">ECMAScript2021</a></td>
<td><a href="#ECMAScript2021">ECMAScript12</a></td>
<td>-</td>
</tr>
</tbody></table>
<h2 id="ECMAScript2016"><a href="#ECMAScript2016" class="headerlink" title="ECMAScript2016"></a>ECMAScript2016</h2><ul>
<li>Array.prototype.includes</li>
<li><code>**</code>替代<code>Math.pow</code>实现指数的计算</li>
</ul>
<h2 id="ECMAScript2017"><a href="#ECMAScript2017" class="headerlink" title="ECMAScript2017"></a>ECMAScript2017</h2><ul>
<li>Object.values()</li>
<li>Object.entries()</li>
<li>String.prototype.padStart</li>
<li>String.prototype.padEnd<br>(⚠️ padStart and padEnd on Emojis and other double-byte chars)</li>
<li>Object.getOwnPropertyDescriptors(<a href="https://es6.ruanyifeng.com/#docs/object-methods#Object-getOwnPropertyDescriptors" target="_blank" rel="noopener">参考</a>)</li>
<li>允许在函数入参的末尾添加<code>,</code>,比如<code>function a(a1,a2,){...}</code></li>
<li>Async/Await</li>
</ul>
<h2 id="ECMAScript2018"><a href="#ECMAScript2018" class="headerlink" title="ECMAScript2018"></a>ECMAScript2018</h2><ul>
<li><p>js引擎主进程和worker进程间可使用<code>SharedArrayBuffer</code>进行数据共享，并通过<code>Atomics</code>来管理共享内容数据</p>
</li>
<li><p>允许模板字符串和函数组合使用</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">staticStr,...dynamicParams</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(staticStr)<span class="comment">// ['static1 ',' static2 ','']</span></span><br><span class="line">    <span class="built_in">console</span>.log(dynamicParams)<span class="comment">// [1,2]</span></span><br><span class="line">&#125;</span><br><span class="line">fn<span class="string">`static1 <span class="subst">$&#123;<span class="number">1</span>&#125;</span> static2 <span class="subst">$&#123;<span class="number">2</span>&#125;</span>`</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>正则表达式中<code>.</code>可以在<code>s</code>模式下匹配所有字符（包括<code>\n</code>、<code>\r</code>、<code>\f</code>等）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//Before</span></span><br><span class="line">/first.second/.test(<span class="string">'first\nsecond'</span>); <span class="comment">//false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//ECMAScript 2018</span></span><br><span class="line">/first.second/s.test(<span class="string">'first\nsecond'</span>); <span class="comment">//true</span></span><br><span class="line"><span class="comment">// Notice: /s</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>正则表达式中可以对匹配组合进行命名，格式为：<code>(?&lt;name&gt;...)</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">(<span class="regexp">/(?&lt;cname&gt;abc)/</span>.exec(<span class="string">'testabc'</span>))</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">  输出:</span></span><br><span class="line"><span class="comment">  [</span></span><br><span class="line"><span class="comment">    'abc',</span></span><br><span class="line"><span class="comment">    'abc',</span></span><br><span class="line"><span class="comment">    groups:&#123; cname: 'abc' &#125;,</span></span><br><span class="line"><span class="comment">    index: 4,</span></span><br><span class="line"><span class="comment">    input: 'testabc'</span></span><br><span class="line"><span class="comment">  ]</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// \k使用之前组合名称匹配到的内容</span></span><br><span class="line"><span class="keyword">let</span> sameWords=<span class="regexp">/(?&lt;fruit&gt;apple|orange)===\k&lt;fruit&gt;/</span></span><br><span class="line">sameWords.test(<span class="string">'apple===apple'</span>) <span class="comment">// true</span></span><br><span class="line">sameWords.test(<span class="string">'apple===orange'</span>) <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 在replace函数中使用组合命名</span></span><br><span class="line"><span class="keyword">let</span> replaceReg=<span class="regexp">/(?&lt;firstName&gt;[a-zA-z]+) (?&lt;secondName&gt;[a-zA-z]+)/</span></span><br><span class="line"><span class="string">'abc def'</span>.replace(replaceReg,<span class="string">'$&lt;secondName&gt; $&lt;firstName&gt;'</span>) <span class="comment">// 'def abc'</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>在解构中用<code>...varName</code>的方式提取对象中未被指定的属性，重组为一个新的对象，记为<code>varName</code></p>
</li>
<li><p>对象可使用<code>...</code>进行扩展</p>
</li>
<li><p>正则表达式可以使用<code>向前查找</code>,查找时消耗查询字符</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ['winning',groups:undefined,index:1,input:'#winning']</span></span><br><span class="line">(<span class="regexp">/(?&lt;=#).*/</span>.exec(<span class="string">'#winning'</span>))</span><br><span class="line"></span><br><span class="line"><span class="comment">// 反向</span></span><br><span class="line"><span class="comment">// ['inning',groups:undefined,index:2,input:'#winning']</span></span><br><span class="line">(<span class="regexp">/(?&lt;!#)[a-z]+/</span>.exec(<span class="string">'#winning'</span>))</span><br><span class="line"><span class="comment">// ['',groups:undefined,index:0,input:'#winning']</span></span><br><span class="line">(<span class="regexp">/(?&lt;!#)[a-z]*/</span>.exec(<span class="string">'#winning'</span>))</span><br><span class="line"></span><br><span class="line"><span class="comment">// PS: (?&lt;!...)会去匹配行首空字符，当匹配到第一个符合匹配规则的，就直接输出</span></span><br><span class="line"><span class="comment">// 比如：`/(?&lt;!#)[a-z]*/.exec('#winning')`中，(?&lt;!#)匹配的是行首空字符，[a-z]*匹配的是空字符，因为规则无法匹配首字符`#`</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>在正则表达式中添加<code>Script</code>或<code>Script_Extensions</code>来扩展<code>Unicode</code>的匹配范围</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//The following matches a single Greek character</span></span><br><span class="line">/\p&#123;Script_Extensions=Greek&#125;/u.test(<span class="string">'π'</span>); <span class="comment">// true</span></span><br><span class="line"><span class="comment">// 等价于</span></span><br><span class="line">/\p&#123;Script=Greek&#125;/u.test(<span class="string">'π'</span>); <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 反向</span></span><br><span class="line">/\P&#123;Script=Greek&#125;/u.test(<span class="string">'π'</span>); <span class="comment">// false</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>Promise.prototype.finally()</p>
</li>
<li><p>for-of中使用await，在for循环中，上一个promise resolve后，才会执行下一个promise</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> promises=[...] <span class="comment">// Promise数组</span></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">for</span> <span class="keyword">await</span> (<span class="keyword">const</span> p <span class="keyword">of</span> promises)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(p)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">a()</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h2 id="ECMAScript2019"><a href="#ECMAScript2019" class="headerlink" title="ECMAScript2019"></a>ECMAScript2019</h2><ul>
<li><p>String.prototype.trimStart()</p>
</li>
<li><p>String.prototype.trimEnd()</p>
</li>
<li><p>Object.fromEntries()</p>
</li>
<li><p>Array.prototype.flat()</p>
</li>
<li><p>Array.prototype.flatMap()</p>
</li>
<li><p>try-catch中<code>catch</code>的参数改为可选</p>
</li>
<li><p>Symbol.prototype.description输出<code>Symbol</code>类型变量的描述</p>
</li>
<li><p>Array.prototype.sort()，在原来的基础上使用稳定的排序算法，尤其在对象数组中，会根据给定的键之间比较进行排序，同键值的多个对象的顺序与这些对象在原数组中的顺序一致</p>
</li>
<li><p>Function.prototype.toString(),将返回函数的注释、空格和语法详细信息</p>
</li>
<li><p>JSON成为ECMAScript的完全子集，可解析之前解析不了的JSON字符串：行分隔符（<code>\u2028</code>）和段分隔符（<code>\u2029</code>）</p>
</li>
<li><p>JSON.stringify()输出进行了优化，原来显示未知的字符，现在在字符代码之前插入<code>\</code>字符后仍能保持可读性</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// before</span></span><br><span class="line"><span class="built_in">JSON</span>.stringify(<span class="string">'\uD83D'</span>);<span class="comment">// '"�"'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// after</span></span><br><span class="line"><span class="built_in">JSON</span>.stringify(<span class="string">'\uD83D'</span>);<span class="comment">// '"\\ud83d"'</span></span><br></pre></td></tr></table></figure>

<h2 id="ECMAScript2020"><a href="#ECMAScript2020" class="headerlink" title="ECMAScript2020"></a>ECMAScript2020</h2></li>
<li><p>在变量名前加<code>#</code>，来定义类私有变量</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">a</span></span>&#123;</span><br><span class="line">  #p='private'</span><br><span class="line">  print()&#123;</span><br><span class="line">    console.log(this.#p)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> aa=<span class="keyword">new</span> a</span><br><span class="line"></span><br><span class="line"><span class="comment">// 正常</span></span><br><span class="line">aa.print() <span class="comment">// 'private</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 异常</span></span><br><span class="line"><span class="comment">// Uncaught SyntaxError: Private field '#p' must be declared in an enclosing class</span></span><br><span class="line">console.log(aa.#p)</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>?.</code>可选链运算符,符号左侧的值为<code>undefined</code>或<code>null</code>时，运算表达式返回<code>undefined</code>,否则继续执行后续的操作</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 形式：</span></span><br><span class="line">obj?.prop</span><br><span class="line">obj?.[expr]</span><br><span class="line">arr?.[index]</span><br><span class="line">func?.(args)</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>??</code>空值合并运算符,运算符左侧为<code>undefined</code>或<code>null</code>时，取符号右侧的值，否则取左侧的值</p>
</li>
<li><p>动态引入，<code>import(&#39;some.js&#39;).then(...)</code></p>
</li>
<li><p>Promise.allSettled，处理多个Promise对象的集合，无论这些Promise对象的状态怎么变化，都会被记录下来，并在所有Promise状态发生变化后，执行then回调，入参为每个Promise状态的集合</p>
</li>
<li><p>globalThis</p>
</li>
<li><p>BigInt，通过在数字后面添加<code>n</code>来指定数的类型为BigInt,此类型用于处理大于(2^53 - 1)的整数，不可与普通number类型的数据进行操作，但可比较大小</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">11n</span>+<span class="number">11</span> <span class="comment">// Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>String.prototype.matchAll，返回的是一个可迭代对象，可以通过for-of访问每一个匹配组的结果（包含使用括号定义的捕获组信息）</p>
</li>
</ul>
<h2 id="ECMAScript2021"><a href="#ECMAScript2021" class="headerlink" title="ECMAScript2021"></a>ECMAScript2021</h2><ul>
<li><p>String.prototype.replaceAll</p>
</li>
<li><p>Promise.any</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Promise</span>.any(promises).then(</span><br><span class="line">  (first) =&gt; &#123;</span><br><span class="line">    <span class="comment">// 任何一个 Promise 完成了</span></span><br><span class="line">  &#125;,</span><br><span class="line">  (error) =&gt; &#123;</span><br><span class="line">    <span class="comment">// 所有的 Promise 都拒绝了</span></span><br><span class="line">  &#125;</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
</li>
<li><p>数字分隔符<code>_</code>,<code>let x=2_3333</code>等价于<code>let x=23333</code></p>
</li>
<li><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl" target="_blank" rel="noopener">Intl</a>.ListFormat，国际化格式化</p>
</li>
</ul>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2020/11/es6-es11/" data-id="cl7gxergt000oo4tl9l0z4dm5" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-es6相关" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2020/11/es6%E7%9B%B8%E5%85%B3/">es6相关</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2020/11/es6%E7%9B%B8%E5%85%B3/">
            <time datetime="2020-11-10T10:14:44.000Z" itemprop="datePublished">2020-11-10</time>
        </a>
    </div>


                        
                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/blog/tags/es6/" rel="tag">es6</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <!-- TOC -->

<ul>
<li><a href="#super%E5%9C%A8babel%E4%B8%AD%E7%9A%84%E5%AE%9E%E7%8E%B0">super在babel中的实现</a></li>
<li><a href="#%E8%BF%AD%E4%BB%A3%E5%99%A8%E8%A7%84%E8%8C%83">迭代器规范</a></li>
<li><a href="#%E5%8F%AF%E8%BF%AD%E4%BB%A3%E5%8D%8F%E8%AE%AE">可迭代协议</a><ul>
<li><a href="#%E5%8F%AF%E8%BF%AD%E4%BB%A3%E5%AF%B9%E8%B1%A1%E7%89%B9%E5%BE%81">可迭代对象特征</a></li>
</ul>
</li>
<li><a href="#%E8%BF%AD%E4%BB%A3%E5%99%A8%E5%8D%8F%E8%AE%AE">迭代器协议</a><ul>
<li><a href="#%E8%BF%AD%E4%BB%A3%E5%99%A8%E5%AF%B9%E8%B1%A1%E7%89%B9%E5%BE%81">迭代器对象特征</a></li>
</ul>
</li>
</ul>
<!-- /TOC -->

<h2 id="super在babel中的实现"><a href="#super在babel中的实现" class="headerlink" title="super在babel中的实现"></a>super在babel中的实现</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">a</span> </span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>()&#123;</span><br><span class="line">        <span class="keyword">this</span>.a=<span class="number">1</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">b</span> <span class="keyword">extends</span> <span class="title">a</span> </span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>()&#123;</span><br><span class="line">        <span class="keyword">super</span>()</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>编译后</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ...some helper function</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">_createSuper</span>(<span class="params">Derived</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> hasNativeReflectConstruct = _isNativeReflectConstruct()</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> <span class="title">_createSuperInternal</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="comment">// 在调用前，_inherits函数中已将父类函数挂到子类函数的原型链上，即b.__proto__===a</span></span><br><span class="line">        <span class="comment">// 所以这个的Super就是b.__proto__，即父类a</span></span><br><span class="line">        <span class="keyword">var</span> Super = _getPrototypeOf(Derived), result</span><br><span class="line">        <span class="keyword">if</span> (hasNativeReflectConstruct) &#123;</span><br><span class="line">            <span class="keyword">var</span> NewTarget = _getPrototypeOf(<span class="keyword">this</span>).constructor</span><br><span class="line">            result = <span class="built_in">Reflect</span>.construct(Super, <span class="built_in">arguments</span>, NewTarget)</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            result = Super.apply(<span class="keyword">this</span>, <span class="built_in">arguments</span>)</span><br><span class="line">        &#125; <span class="keyword">return</span> _possibleConstructorReturn(<span class="keyword">this</span>, result)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a = <span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  _classCallCheck(<span class="keyword">this</span>, a);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">this</span>.a = <span class="number">1</span>;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> b = <span class="comment">/*#__PURE__*/</span><span class="function"><span class="keyword">function</span> (<span class="params">_a</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// b的prototype的__proto__指向a的prototype，属性调用时：检查b实例的属性=&gt;检查b的prototype的属性=&gt;检查a的prototype的属性</span></span><br><span class="line">  <span class="comment">// 其中会调用_setPrototypeOf函数,将a挂到b的原型链上，b.__proto__===a</span></span><br><span class="line">  _inherits(b, _a);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 创建super函数，内部存储b为Derived参数</span></span><br><span class="line">  <span class="keyword">var</span> _super = _createSuper(b);</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">b</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    _classCallCheck(<span class="keyword">this</span>, b);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> _super.call(<span class="keyword">this</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> b;</span><br><span class="line">&#125;(a);</span><br></pre></td></tr></table></figure>

<h2 id="迭代器规范"><a href="#迭代器规范" class="headerlink" title="迭代器规范"></a>迭代器规范</h2><blockquote>
<p>参考<br><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols" target="_blank" rel="noopener">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols</a></p>
</blockquote>
<h2 id="可迭代协议"><a href="#可迭代协议" class="headerlink" title="可迭代协议"></a>可迭代协议</h2><p>要成为可迭代对象，一个对象（或原型链上）必须实现<code>@@iterator</code>方法，当一个对象需要被迭代的时候（比如被置入一个 for…of 循环时），首先，会不带参数调用它的<code>@@iterator</code>方法，然后使用此方法返回的迭代器获得要迭代的值。</p>
<p>内置类型拥有默认的迭代器行为:</p>
<ul>
<li>Array.prototype[@@iterator]()</li>
<li>TypedArray.prototype[@@iterator]()</li>
<li>String.prototype[@@iterator]()</li>
<li>Map.prototype[@@iterator]()</li>
<li>Set.prototype[@@iterator]()</li>
</ul>
<h3 id="可迭代对象特征"><a href="#可迭代对象特征" class="headerlink" title="可迭代对象特征"></a><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#%E5%8F%AF%E8%BF%AD%E4%BB%A3%E5%8D%8F%E8%AE%AE" target="_blank" rel="noopener">可迭代对象特征</a></h3><ol>
<li>此对象实现了可迭代协议——拥有<code>@@iterator</code>函数（即<code>typeof fn[Symbol.iterator]===&#39;function&#39;</code>），且<code>@@iterator</code>函数执行后返回一个迭代器对象。</li>
<li><code>@@iterator</code>函数的<code>this</code>默认指向该可迭代对象</li>
</ol>
<h2 id="迭代器协议"><a href="#迭代器协议" class="headerlink" title="迭代器协议"></a>迭代器协议</h2><h3 id="迭代器对象特征"><a href="#迭代器对象特征" class="headerlink" title="迭代器对象特征"></a><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#%E8%BF%AD%E4%BB%A3%E5%99%A8%E5%8D%8F%E8%AE%AE" target="_blank" rel="noopener">迭代器对象特征</a></h3><ol>
<li>此对象实现了迭代器协议——拥有<code>next</code>函数，且执行<code>next</code>函数后返回<code>{done:Boolean,value:any}</code>这样的对象（可在其上加另外的对象属性）</li>
<li><code>for-of</code>中<code>done</code>为<code>true</code>时，<code>value</code>属性的值会被忽略</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj2=&#123;</span><br><span class="line">    [<span class="built_in">Symbol</span>.iterator]()&#123;</span><br><span class="line">        <span class="keyword">let</span> i=<span class="number">-1</span></span><br><span class="line">        <span class="keyword">const</span> txt=[</span><br><span class="line">            <span class="string">'this will output in both case'</span>,</span><br><span class="line">            <span class="string">'just output in call `next` by hand'</span></span><br><span class="line">        ]</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            next()&#123;</span><br><span class="line">                i++</span><br><span class="line">                <span class="keyword">return</span> &#123;<span class="attr">done</span>:i===txt.length<span class="number">-1</span>,<span class="attr">value</span>:txt[&#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> obj1=&#123;</span><br><span class="line">    [<span class="built_in">Symbol</span>.iterator]:<span class="function"><span class="keyword">function</span>* (<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">yield</span> <span class="string">'this will output in both case'</span></span><br><span class="line">        <span class="keyword">return</span> <span class="string">'just output in call `next` by hand'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'obj1 output'</span>)</span><br><span class="line"><span class="keyword">var</span> g=obj1[<span class="built_in">Symbol</span>.iterator]()</span><br><span class="line"><span class="built_in">console</span>.log(g.next().value)</span><br><span class="line"><span class="built_in">console</span>.log(g.next().value)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'----'</span>)</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i <span class="keyword">of</span> obj1)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(i)</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'obj2 output'</span>)</span><br><span class="line"><span class="keyword">var</span> g=obj2[<span class="built_in">Symbol</span>.iterator]()</span><br><span class="line"><span class="built_in">console</span>.log(g.next().value)</span><br><span class="line"><span class="built_in">console</span>.log(g.next().value)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'----'</span>)</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i <span class="keyword">of</span> obj2)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(i)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// =&gt; 输出结果：</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// obj1 output</span></span><br><span class="line"><span class="comment">// this will output in both case</span></span><br><span class="line"><span class="comment">// just output in call `next` by hand</span></span><br><span class="line"><span class="comment">// ----</span></span><br><span class="line"><span class="comment">// this will output in both case</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// obj2 output</span></span><br><span class="line"><span class="comment">// this will output in both case</span></span><br><span class="line"><span class="comment">// just output in call `next` by hand</span></span><br><span class="line"><span class="comment">// ----</span></span><br><span class="line"><span class="comment">// this will output in both case</span></span><br></pre></td></tr></table></figure>

<!-- ```javascript
function* a(){
    console.log(this) // {x:1}
    const rec=yield 'abc'
    console.log(rec) // abc1
    yield 123
    console.log('done')
}
const g=a.call({x:1})
const y=g.next()
const n=g.next(y.value+'1')
console.log(n.value) // 123
``` -->

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2020/11/es6%E7%9B%B8%E5%85%B3/" data-id="cl7gxergx000to4tl2oizebyr" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-元素resize" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2020/06/%E5%85%83%E7%B4%A0resize/">元素resize</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2020/06/%E5%85%83%E7%B4%A0resize/">
            <time datetime="2020-06-27T23:38:44.000Z" itemprop="datePublished">2020-06-27</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/blog/categories/web-api/">web-api</a>
    </div>

                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/blog/tags/web-api/" rel="tag">web-api</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            <p><h1 id="监听元素尺寸的变化"><a href="#监听元素尺寸的变化" class="headerlink" title="监听元素尺寸的变化"></a>监听元素尺寸的变化</h1><h2 id="传统的，通过resize来监听尺寸大的变化（以高度变化为例）"><a href="#传统的，通过resize来监听尺寸大的变化（以高度变化为例）" class="headerlink" title="传统的，通过resize来监听尺寸大的变化（以高度变化为例）"></a>传统的，通过resize来监听尺寸大的变化（以高度变化为例）</h2><p>由于resize事件仅在某些元素和window上触发，对于其他元素需要借助这些元素来监听尺寸的变化。</p>
<p>首先保持<code>iframe</code>的高度与变化元素的高度一致，当元素的高度变化时，<code>iframe</code>内的窗口大小也变化，会触发<code>iframe</code>内window的resize事件，以此来监听元素尺寸的变化。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span>&gt;</span>change div's height<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"size-div"</span> <span class="attr">style</span>=<span class="string">"height:100px;"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">iframe</span>&gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></span><br><span class="line">        the div can change size</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">"button"</span>).addEventListener(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> target = <span class="built_in">document</span>.querySelector(<span class="string">".size-div"</span>);</span><br><span class="line">  <span class="keyword">var</span> rand = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * <span class="number">200</span> + <span class="number">50</span>);</span><br><span class="line">  target.setAttribute(<span class="string">"style"</span>, <span class="string">"height:"</span> + rand + <span class="string">"px;border:1px solid;"</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">document</span></span><br><span class="line">  .querySelector(<span class="string">"iframe"</span>)</span><br><span class="line">  .contentWindow.addEventListener(<span class="string">"resize"</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"div changed size"</span>);</span><br><span class="line">  &#125;);</span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.size-div</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">iframe</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">border</span>:<span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
            <p class="article-more-link">
                <a href="/blog/2020/06/%E5%85%83%E7%B4%A0resize/#more">查看更多</a>
            </p>
        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2020/06/%E5%85%83%E7%B4%A0resize/" data-id="cl7gxergs000no4tl6xvg01r1" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-移动端兼容性问题记录" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
            
	
		<a href="/blog/2020/05/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98%E8%AE%B0%E5%BD%95/" itemprop="url">
            <img src="https://assets.materialup.com/uploads/f9c7551f-7796-4456-8bc1-6590fdab2957/preview.jpg" class="article-banner" style="object-fit: cover;"/>
        </a>
	



        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2020/05/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98%E8%AE%B0%E5%BD%95/">移动端兼容性问题记录</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2020/05/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98%E8%AE%B0%E5%BD%95/">
            <time datetime="2020-05-31T16:41:04.000Z" itemprop="datePublished">2020-05-31</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/blog/categories/%E5%85%BC%E5%AE%B9%E6%80%A7/">兼容性</a>
    </div>

                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/blog/tags/%E5%85%BC%E5%AE%B9%E6%80%A7/" rel="tag">兼容性</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <ol>
<li><p>仅在<code>android</code>版钉钉中嵌入的网页里，全屏api的调用会失效，所以点击视频无法默认将<code>video</code>元素全屏来进行播放</p>
</li>
<li><p>仅在<code>ios</code>版钉钉中嵌入的网页里，上传文件时，<code>xhr.upload.onprogress</code>不会触发</p>
</li>
<li><p><code>video</code>元素在<code>ios</code>上默认是调用原生的播放器全屏播放，而在<code>android</code>上则默认是在<code>video</code>元素中内联播放</p>
</li>
<li><p>在<code>ios</code>上为了让<code>video</code>能内联播放，需要在<code>video</code>元素上设置<code>playsinline</code>（ios10及之后系统版本的safari中有效）和<code>webkit-playsinline</code>（ios10之前的safari中有效）属性</p>
</li>
<li><p>隐藏系统默认的视频播放按钮</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">*<span class="selector-pseudo">::-webkit-media-controls-start-playback-button</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">    <span class="attribute">-webkit-appearance</span>: none;</span><br><span class="line">&#125;</span><br><span class="line">*<span class="selector-pseudo">::-webkit-media-controls-panel</span> &#123;</span><br><span class="line"> <span class="attribute">display</span>: none;</span><br><span class="line">    <span class="attribute">-webkit-appearance</span>: none;</span><br><span class="line">&#125;</span><br><span class="line">*<span class="selector-pseudo">::--webkit-media-controls-play-button</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">    <span class="attribute">-webkit-appearance</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>钉钉中要改变网页标题，需要调用钉钉的api，引用<code>dingtalk-jsapi/api/biz/navigation/setTitle</code></p>
</li>
<li><p>在ios下的网页中，input输入框内的内容溢出输入框的宽度时，无法通过移动光标来查看超出部分的内容，不管这个输入框是否只读。因为在移动光标时，输入框中显示的内容不会随着改变</p>
</li>
</ol>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2020/05/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98%E8%AE%B0%E5%BD%95/" data-id="cl7gxergr000lo4tl2nr384su" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-基于docker搭建gitlab-runner" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
            
	
		<a href="/blog/2020/05/%E5%9F%BA%E4%BA%8Edocker%E6%90%AD%E5%BB%BAgitlab-runner/" itemprop="url">
            <img src="http://img0.imgtn.bdimg.com/it/u=1699744843,363136547&fm=26&gp=0.jpg" class="article-banner" style="object-fit: contain;"/>
        </a>
	



        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2020/05/%E5%9F%BA%E4%BA%8Edocker%E6%90%AD%E5%BB%BAgitlab-runner/">基于docker搭建gitlab-runner</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2020/05/%E5%9F%BA%E4%BA%8Edocker%E6%90%AD%E5%BB%BAgitlab-runner/">
            <time datetime="2020-05-31T14:13:25.000Z" itemprop="datePublished">2020-05-31</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/blog/categories/%E8%BF%90%E7%BB%B4/">运维</a>
    </div>

                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/blog/tags/docker/" rel="tag">docker</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            <p><h1 id="基于docker搭建gitlab-runner"><a href="#基于docker搭建gitlab-runner" class="headerlink" title="基于docker搭建gitlab-runner"></a>基于docker搭建gitlab-runner</h1><ol>
<li><p>下载gitlab镜像</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker pull gitlab/gitlab-runner</span><br></pre></td></tr></table></figure>
</li>
<li><p>注册runner</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># ps:在注册过程中直接以人机交互的方式一步一步进行注册的话，可能会出现ssl验证不通过的问题，所以在这种情况下直接用命令行参数进行注册</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --rm 临时创建一个容器，用来运行gitlab/gitlab-runner镜像</span></span><br><span class="line">sudo docker run --rm \</span><br><span class="line"><span class="comment"># 挂载宿主的文件目录到容器内,用以存储注册之后生成的config.toml文件</span></span><br><span class="line"><span class="comment"># 当以root用户运行gitlab-runner时，/etc/gitlab-runner为默认存储配置文件的地方</span></span><br><span class="line">-v /home/dcxx/gitlab-runner:/etc/gitlab-runner \</span><br><span class="line"><span class="comment"># 指定镜像</span></span><br><span class="line">gitlab/gitlab-runner \</span><br><span class="line"><span class="comment"># 执行gitlab-runner register命令</span></span><br><span class="line">register \</span><br><span class="line"><span class="comment"># 不需要交互式</span></span><br><span class="line">--non-interactive \</span><br><span class="line"><span class="comment"># gitlab web服务的https的证书</span></span><br><span class="line">--tls-ca-file <span class="string">'/etc/gitlab-runner/git.dcyun.com.crt'</span> \</span><br><span class="line"><span class="comment"># gitlab web服务地址</span></span><br><span class="line">--url <span class="string">"https://git.dcyun.com/"</span> \</span><br><span class="line"><span class="comment"># gitlab网站上添加runner时提供的token</span></span><br><span class="line">--registration-token <span class="string">"T3V4vNvQrAMZDyNVFrg7"</span> \</span><br><span class="line"><span class="comment"># 指定在什么环节跑构建脚本</span></span><br><span class="line">--executor <span class="string">"docker"</span> \</span><br><span class="line"><span class="comment"># 指定跑构建脚本时的docker环境，即镜像</span></span><br><span class="line">--docker-image ubuntu:latest \</span><br><span class="line"><span class="comment"># runner的名称，主要显示在job详情中pipeline选择runner时的下拉项中</span></span><br><span class="line">--name <span class="string">'前端自动部署'</span> \</span><br><span class="line"><span class="comment"># 运行没有配置tag的任务执行</span></span><br><span class="line">--run-untagged=<span class="string">"true"</span> \</span><br><span class="line"><span class="comment"># runner的tag</span></span><br><span class="line">--tag-list <span class="string">'docker,font-end,common'</span></span><br></pre></td></tr></table></figure>

</li>
</ol></p>
            <p class="article-more-link">
                <a href="/blog/2020/05/%E5%9F%BA%E4%BA%8Edocker%E6%90%AD%E5%BB%BAgitlab-runner/#more">查看更多</a>
            </p>
        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2020/05/%E5%9F%BA%E4%BA%8Edocker%E6%90%AD%E5%BB%BAgitlab-runner/" data-id="cl7gxergp000jo4tl5ctdcjut" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-docker环境配置" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
            
	
		<a href="/blog/2020/05/docker%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/" itemprop="url">
            <img src="http://blog.cloudmantra.net/wp-content/uploads/2018/04/docker-cloudmantra-aws.png" class="article-banner" style="object-fit: contain;"/>
        </a>
	



        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2020/05/docker%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/">docker环境配置</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2020/05/docker%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/">
            <time datetime="2020-05-31T13:52:28.000Z" itemprop="datePublished">2020-05-31</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/blog/categories/%E8%BF%90%E7%BB%B4/">运维</a>
    </div>

                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/blog/tags/docker/" rel="tag">docker</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <h1 id="宿主机配置"><a href="#宿主机配置" class="headerlink" title="宿主机配置"></a>宿主机配置</h1><ol>
<li><p><a href="https://mirrors.tuna.tsinghua.edu.cn/help/docker-ce/" target="_blank" rel="noopener">docker-ce 国内镜像下载</a></p>
</li>
<li><p><a href="https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu/" target="_blank" rel="noopener">设置Ubuntu软件源为清华镜像</a></p>
</li>
<li><p>设置docker hub国内镜像</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// /etc/docker/daemon.json</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="attr">"registry-mirrors"</span> : [</span><br><span class="line">    <span class="comment">// 网易</span></span><br><span class="line">    <span class="string">"https://hub-mirror.c.163.com"</span>,</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>或者<a href="https://yq.aliyun.com/articles/29941" target="_blank" rel="noopener">使用阿里的镜像</a></p>
</li>
</ol>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2020/05/docker%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/" data-id="cl7gxergo000io4tl1f5dh3rs" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-CSRF" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
            
	
		<a href="/blog/2020/05/CSRF/" itemprop="url">
            <img src="/blog/2020/05/CSRF/csrf.png" class="article-banner" style="object-fit: cover;"/>
        </a>
	



        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2020/05/CSRF/">CSRF</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2020/05/CSRF/">
            <time datetime="2020-05-31T13:50:03.000Z" itemprop="datePublished">2020-05-31</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/blog/categories/web%E5%AE%89%E5%85%A8/">web安全</a>
    </div>

                        
                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <h1 id="CSRF"><a href="#CSRF" class="headerlink" title="CSRF"></a>CSRF</h1><p>防范措施：</p>
<!-- + 使用非`get`的请求方式，避免在dom中调接口（比如：`img`和`script`的`src`属性值为后端接口调用地址时），可以一定程度上减少风险 -->
<ul>
<li>检测请求头中的Referer字段，判断请求的来源是否是来自合法（意料之中）的网站</li>
<li><u><strong>在token无法被他人窃取的情况下</strong></u>，客户端和服务端对同一用户在两端都保留一个相同的token，通过检测token是否一致来确定是否为同一用户<ul>
<li>token不可以放在cookie中，防止在访问服务端时浏览器自动给请求带上cookie（浏览器cookie设置的行为）</li>
<li>JWT（含有少量信息的token，在一定程度上后端代码可以减少与数据库的交互）</li>
<li>将token放在页面的url上有时是不安全的，因为跳转后的页面也可能会获取到上一个页面的url内容</li>
</ul>
</li>
</ul>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2020/05/CSRF/" data-id="cl7gxergk000go4tl1h7od04w" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-typescript学习记录" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
            
	
		<a href="/blog/2020/01/typescript%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/" itemprop="url">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579524209973&di=418e20241392574a9e8f678e45dd41cd&imgtype=0&src=http%3A%2F%2Fimage.fundebug.com%2F2018-12-25-ts.jpeg" class="article-banner" style="object-fit: cover;"/>
        </a>
	



        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2020/01/typescript%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/">typescript学习记录</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2020/01/typescript%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/">
            <time datetime="2020-01-20T16:27:58.000Z" itemprop="datePublished">2020-01-20</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/blog/categories/typescript/">typescript</a>
    </div>

                        
                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <h2 id="typescript配置相关的"><a href="#typescript配置相关的" class="headerlink" title="typescript配置相关的"></a>typescript配置相关的</h2><h4 id="在vscode中，通过配置typescript，让vscode可以识别css-module，进而提供css-module相关的代码补全"><a href="#在vscode中，通过配置typescript，让vscode可以识别css-module，进而提供css-module相关的代码补全" class="headerlink" title="在vscode中，通过配置typescript，让vscode可以识别css-module，进而提供css-module相关的代码补全"></a>在vscode中，通过配置typescript，让vscode可以识别css-module，进而提供css-module相关的代码补全</h4><p>在<code>tsconfig.json</code>中配置<code>typescript-plugin-css-modules</code>插件</p>
<p>vscode中workaround的setting配置为<code>&quot;typescript.tsdk&quot;: &quot;node_modules\\typescript\\lib&quot;</code>来使用工作区下的node_modules中的typescript来加载插件。<a href="https://github.com/mrmckeb/typescript-plugin-css-modules#recommended-usage" target="_blank" rel="noopener">reference</a></p>
<h4 id="eslint中行末结束符无法自动修复"><a href="#eslint中行末结束符无法自动修复" class="headerlink" title="eslint中行末结束符无法自动修复"></a>eslint中行末结束符无法自动修复</h4><p><code>Expected linebreaks to be &#39;LF&#39; but found &#39;CRLF&#39;.eslint(linebreak-style)</code><br><a href="https://github.com/microsoft/vscode-eslint/issues/707" target="_blank" rel="noopener">在eslint可识别但由于bug暂不可自动修复</a></p>
<p>暂时使用<code>EditorConfig</code>这个<code>vscode</code>插件来解决行末<code>IF</code>和<code>CRLF</code>的问题</p>
<hr>
<h2 id="typescript规定相关的"><a href="#typescript规定相关的" class="headerlink" title="typescript规定相关的"></a>typescript规定相关的</h2><h4 id="ts中对对象字面量做参数过多检测的情况，以如何绕过"><a href="#ts中对对象字面量做参数过多检测的情况，以如何绕过" class="headerlink" title="ts中对对象字面量做参数过多检测的情况，以如何绕过"></a>ts中对对象字面量做<code>参数过多</code>检测的情况，以如何绕过</h4><p>ts中对对象字面量做检测的时候，在特定情况下（字面量直接赋值给其它变量、字面量直接作为函数入参）会额外做<code>参数过多(excess property checking)</code>的检测</p>
<blockquote>
<p> However, TypeScript takes the stance that there’s probably a bug in this code. Object literals get special treatment and undergo <em>excess property checking</em> when assigning them to other variables, or passing them as arguments. If an object literal has any properties that the “target type” doesn’t have, you’ll get an error: </p>
</blockquote>
<p>绕过<em>excess property checking</em>的方法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1. use a type assertion（类型断言）</span><br><span class="line">2. add a string index signature（定义string型的索引签名）</span><br><span class="line">3. One final way to get around these checks, which might be a bitsurprising, is to assign the object to another variable</span><br></pre></td></tr></table></figure>

<h4 id="ts文件中类型的申明作用域如何决定"><a href="#ts文件中类型的申明作用域如何决定" class="headerlink" title="ts文件中类型的申明作用域如何决定"></a>ts文件中类型的申明作用域如何决定</h4><p>ts根据该文件是否存在import或者export来决定当前文件是个模块还是运行在全局环境下，以此来推断类型申明是否存在于全局中</p>
<blockquote>
<p>参考：</p>
<ol>
<li><a href="https://stackoverflow.com/questions/40900791/cannot-redeclare-block-scoped-variable-in-unrelated-files" target="_blank" rel="noopener">https://stackoverflow.com/questions/40900791/cannot-redeclare-block-scoped-variable-in-unrelated-files</a> </li>
<li><a href="https://github.com/microsoft/vscode/issues/22436#issuecomment-319740226" target="_blank" rel="noopener">github-issus</a></li>
</ol>
</blockquote>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2020/01/typescript%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/" data-id="cl7gxergj000fo4tl810acv1w" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-react-hooks" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2019/06/react-hooks/">react-hooks</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2019/06/react-hooks/">
            <time datetime="2019-06-06T16:53:34.000Z" itemprop="datePublished">2019-06-06</time>
        </a>
    </div>


                        
                        
                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <h2 id="React-Hooks"><a href="#React-Hooks" class="headerlink" title="React Hooks"></a>React Hooks</h2><p>hooks的调用顺序</p>
<h3 id="Basic-Hooks"><a href="#Basic-Hooks" class="headerlink" title="Basic Hooks"></a>Basic Hooks</h3><ul>
<li>useState</li>
<li>useEffect</li>
<li>useContext</li>
</ul>
<h3 id="Additional-Hooks"><a href="#Additional-Hooks" class="headerlink" title="Additional Hooks"></a>Additional Hooks</h3><ul>
<li>useReducer</li>
<li>useCallback</li>
<li>useMemo</li>
<li>useRef</li>
<li>useImperativeHandle</li>
<li>useLayoutEffect</li>
<li>useDebugValue</li>
</ul>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2019/06/react-hooks/" data-id="cl7gxergh000do4tl0sbseu77" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-webApi" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2019/06/webApi/">webApi</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2019/06/webApi/">
            <time datetime="2019-06-06T15:46:24.000Z" itemprop="datePublished">2019-06-06</time>
        </a>
    </div>


                        
                        
                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <toc>

<h2 id="IntersectionObserver"><a href="#IntersectionObserver" class="headerlink" title="IntersectionObserver"></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver" target="_blank" rel="noopener">IntersectionObserver</a></h2><blockquote>
<p>定义的视口和目标元素之间相交的关系</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> observer = <span class="keyword">new</span> IntersectionObserver(callback[, options])</span><br></pre></td></tr></table></figure>

<p>当目标元素在定义的视口中的可见百分比超过阈值时，<strong>callback</strong>会被调用，入参有两个：</p>
<ol>
<li>entries：由IntersectionObserverEntry对象构成的数组，仅包含触发阈值的目标元素的IntersectionObserverEntry对象，每个IntersectionObserverEntry对象对应一个目标元素，顺序和目标元素被监听的先后一致</li>
<li>observer：当前的IntersectionObserver实例</li>
</ol>
<p><strong>options</strong>包含3个属性：</p>
<ol>
<li><p>root：定义视口元素，当options未指定或者root为null时，默认未document</p>
</li>
<li><p>rootMargin：值的语法与css的margin一样，正值为在root视口的边缘向外扩展，即视口变大，反之则变小</p>
</li>
<li><p>threshold：值为数组，数组中的每个元素的取值范围为[0,1]，当目标元素在视口中的可见百分比越过数组中某个元素的值时，则callback会被调用。比如：</p>
</li>
</ol>
<table>
<thead>
<tr>
<th>原来目标元素可见百分比</th>
<th>滚动之后目标元素可见百分比</th>
<th>数组中的某一阈值</th>
<th>结果</th>
</tr>
</thead>
<tbody><tr>
<td>0.45</td>
<td>0.51</td>
<td>0.5</td>
<td>callback被触发</td>
</tr>
<tr>
<td>0.51</td>
<td>0.45</td>
<td>0.5</td>
<td>callback被触发</td>
</tr>
</tbody></table>
<p><strong>observer</strong>实例对象上含有4个函数：</p>
<ol>
<li>disconnect：停止此observer对象中监听的所有目标元素</li>
<li>observer：用于指定observer需要监听的目标元素，入参为1个目标元素，且为root的子孙元素</li>
<li>takeRecords：获取observer内部保存的由IntersectionObserverEntry对象构成的数组</li>
<li>unobserver：用于停止监听某一目标元素，入参为1个对应需要停止监听的目标元素，</li>
</ol>
<p>附：<a href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry" target="_blank" rel="noopener"><code>IntersectionObserverEntry</code></a></p>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2019/06/webApi/" data-id="cl7gxergi000eo4tlbzal4bbm" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-cookie总结" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2019/02/cookie%E6%80%BB%E7%BB%93/">cookie总结</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2019/02/cookie%E6%80%BB%E7%BB%93/">
            <time datetime="2019-02-15T10:52:59.000Z" itemprop="datePublished">2019-02-15</time>
        </a>
    </div>


                        
                        
                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <h1 id="Cookie知识点记录"><a href="#Cookie知识点记录" class="headerlink" title="Cookie知识点记录"></a>Cookie知识点记录</h1><blockquote>
<p>参考：<br><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Set-Cookie" target="_blank" rel="noopener">https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Set-Cookie</a><br><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies" target="_blank" rel="noopener">https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies</a></p>
</blockquote>
<ul>
<li><strong>Expires</strong>：cookie 的最长有效时间，形式为符合 HTTP-date 规范的时间戳，比如：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Date" target="_blank" rel="noopener">Date: Wed, 21 Oct 2015 07:28:00 GMT</a>，如果没有设置这个属性，那么表示这是一个会话期 cookie 。一个会话结束于客户端被关闭时，这意味着会话期 cookie 在彼时会被移除。(<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#Session_cookies" target="_blank" rel="noopener">https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#Session_cookies</a>)</li>
<li><strong>Max-Age</strong>:在 cookie 失效之前需要经过的秒数。一位或多位非零（1-9）数字。假如二者 （指 Expires 和Max-Age） 均存在，那么 Max-Age 优先级更高</li>
<li><strong>Domain</strong>:指定 cookie 可以送达的目标。假如没有指定，那么默认值为当前文档访问地址中的主机部分（但是不包含子域名）。后端在设置set-Cookie时，不指定Domain，则默认是当前接口地址的主域名+port或者ip+port</li>
<li><strong>Path</strong>:指定一个 URL 路径，这个路径必须出现在要请求的资源的路径中才可以发送此Cookie。</li>
<li><strong>Secure</strong>:一个带有安全属性的 cookie 只有在请求使用SSL和HTTPS协议的时候才会被发送到服务器</li>
<li><strong>HttpOnly</strong>:设置了 HttpOnly 属性的 cookie 不能使用 JavaScript 经由  Document.cookie 属性、XMLHttpRequest 和  Request APIs 进行访问，以防范跨站脚本攻击（XSS）。</li>
<li><strong>SameSite(实验属性)</strong>:允许服务器设定一则 cookie 不随着跨域请求一起发送，这样可以在一定程度上防范跨站请求伪造攻击（CSRF）</li>
</ul>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2019/02/cookie%E6%80%BB%E7%BB%93/" data-id="cl7gxergg000bo4tlhx1n7x87" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-mvc与mvp与mvvm" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2019/02/mvc%E4%B8%8Emvp%E4%B8%8Emvvm/">mvc与mvp与mvvm</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2019/02/mvc%E4%B8%8Emvp%E4%B8%8Emvvm/">
            <time datetime="2019-02-12T13:58:44.000Z" itemprop="datePublished">2019-02-12</time>
        </a>
    </div>


                        
                        
                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            <p><h1 id="MVC"><a href="#MVC" class="headerlink" title="MVC"></a>MVC</h1><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// view</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">View</span>(<span class="params">controller</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> target = $(<span class="string">'#some-element'</span>)[<span class="number">0</span>]</span><br><span class="line">  <span class="keyword">this</span>.render = <span class="function"><span class="keyword">function</span> (<span class="params">model</span>) </span>&#123;</span><br><span class="line">    target.innerText = model.getValue()</span><br><span class="line">  &#125;</span><br><span class="line">  target.addEventListener(<span class="string">'click'</span>, controller.click)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// model</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Model</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> _value = <span class="number">0</span></span><br><span class="line">  <span class="keyword">var</span> registerViews = []</span><br><span class="line">  <span class="keyword">this</span>.register = <span class="function"><span class="keyword">function</span> (<span class="params">viewInstance</span>) </span>&#123;</span><br><span class="line">    registerViews.push(viewInstance)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">this</span>.notify = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> self = <span class="keyword">this</span></span><br><span class="line">    registerViews.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">viewInstance</span>) </span>&#123;</span><br><span class="line">      viewInstance.render(self)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">this</span>.add = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    _value += <span class="number">1</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">this</span>.getValue = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> _value</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// controller</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Controller</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> model, view</span><br><span class="line">  <span class="keyword">this</span>.init = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    model = <span class="keyword">new</span> Model()</span><br><span class="line">    view = <span class="keyword">new</span> View(<span class="keyword">this</span>)</span><br><span class="line">    model.register(view)</span><br><span class="line">    model.notify()</span><br><span class="line">    setTimeout(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      view.render(&#123; <span class="attr">getValue</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="keyword">return</span> <span class="number">1000</span> &#125; &#125;)</span><br><span class="line">    &#125;, <span class="number">1000</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">this</span>.click = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    model.add()</span><br><span class="line">    model.notify()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 调用</span></span><br><span class="line"><span class="keyword">var</span> controller = <span class="keyword">new</span> Controller()</span><br><span class="line">controller.init()</span><br></pre></td></tr></table></figure>

<p><strong>总结</strong></p>
<ol>
<li>mvc模式中model层可以直接通知view层重新渲染视图</li>
<li>仅由controller层发起model层的修改</li>
<li>代码的执行入口是controller</li>
<li>controller内部维护着model层和view层之间的关系——同步视图和数据</li>
<li>controller可以通过model层使view层重新渲染，也可以直接使view层重新渲染</li>
</ol></p>
            <p class="article-more-link">
                <a href="/blog/2019/02/mvc%E4%B8%8Emvp%E4%B8%8Emvvm/#more">查看更多</a>
            </p>
        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2019/02/mvc%E4%B8%8Emvp%E4%B8%8Emvvm/" data-id="cl7gxergh000co4tl88wcevsz" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-基本排序法概览" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
            
	
		<a href="/blog/2018/11/%E5%9F%BA%E6%9C%AC%E6%8E%92%E5%BA%8F%E6%B3%95%E6%A6%82%E8%A7%88/" itemprop="url">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541667890626&di=fd662fea70dbd36a9ad86160e6b4e55b&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw1280h720%2F20171215%2Fb29e-fypsqiz9054292.png" class="article-banner" style="object-fit: cover;"/>
        </a>
	



        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2018/11/%E5%9F%BA%E6%9C%AC%E6%8E%92%E5%BA%8F%E6%B3%95%E6%A6%82%E8%A7%88/">基本排序法概览</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2018/11/%E5%9F%BA%E6%9C%AC%E6%8E%92%E5%BA%8F%E6%B3%95%E6%A6%82%E8%A7%88/">
            <time datetime="2018-11-08T14:12:51.000Z" itemprop="datePublished">2018-11-08</time>
        </a>
    </div>


                        
                        
                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <!-- TOC -->

<ul>
<li><a href="#%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F">冒泡排序</a></li>
<li><a href="#%E9%80%89%E6%8B%A9%E6%8E%92%E5%BA%8F">选择排序</a></li>
<li><a href="#%E6%8F%92%E5%85%A5%E6%8E%92%E5%BA%8F">插入排序</a></li>
</ul>
<!-- /TOC -->

<p><a href="https://github.com/hq229075284/usualAlgorithm/tree/master/%E6%8E%92%E5%BA%8F" target="_blank" rel="noopener">本文所有测试及排序算法</a></p>
<p>公用测试部分</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createTestData</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> testData = []</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line">    testData.push(<span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * <span class="number">100</span>))</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> testData</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="冒泡排序"><a href="#冒泡排序" class="headerlink" title="冒泡排序"></a>冒泡排序</h2><p><strong>可以先找大的，也可以先找小的</strong></p>
<ul>
<li>含有两层循环，外层循环决定冒泡排序的结束位置索引，内层循环决定当前这一项冒泡排序的开始位置索引</li>
<li>每次内层循环，仅比较当前项和下一项的大小，如果当前项较大，则将两项位置互换。</li>
<li>保证每次内层循环结束后，内层循环的数列的末尾值是该数列的最大值</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sort</span>(<span class="params">data = []</span>) </span>&#123;</span><br><span class="line">    data = <span class="built_in">Object</span>.assign([], data)</span><br><span class="line">    <span class="keyword">for</span> (sp = data.length - <span class="number">2</span>; sp &gt;= <span class="number">1</span>; sp--) &#123;</span><br><span class="line">      <span class="keyword">for</span> (mp = <span class="number">0</span>; mp &lt;= sp; mp++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (data[mp] &gt; data[mp + <span class="number">1</span>]) &#123;</span><br><span class="line">          <span class="keyword">var</span> temp = data[mp]</span><br><span class="line">          data[mp] = data[mp + <span class="number">1</span>]</span><br><span class="line">          data[mp + <span class="number">1</span>] = temp</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> data</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="选择排序"><a href="#选择排序" class="headerlink" title="选择排序"></a>选择排序</h2><p><strong>可以先找大的，也可以先找小的</strong></p>
<ul>
<li>含有两层循环，外层循环决定选择排序当前比较数列的开始索引，同时假定当前开始索引中存储的值最小，内层循环决定选择排序仍然需要比较的数列范围</li>
<li>当需要比较的数列范围内有比当前假定的最小值小的值时，将两个值的位置互换</li>
<li>这种算法保证每次内层循环后都找到当前内层循环队列中的最小值，并且处于当前数列的头部</li>
<li>这是一种循环找极值的排序算法</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sort</span>(<span class="params">data=[]</span>) </span>&#123;</span><br><span class="line">    data = <span class="built_in">Object</span>.assign([], data)</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> sp = <span class="number">0</span>; sp &lt; data.length - <span class="number">1</span>; sp++) &#123;</span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">var</span> mp = sp + <span class="number">1</span>; mp &lt; data.length; mp++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (data[mp] &lt; data[sp]) &#123;</span><br><span class="line">          <span class="keyword">var</span> temp = data[sp]</span><br><span class="line">          data[sp] = data[mp]</span><br><span class="line">          data[mp] = temp</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> data</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="插入排序"><a href="#插入排序" class="headerlink" title="插入排序"></a>插入排序</h2><p><strong>可以先找大的，也可以先找小的</strong></p>
<ul>
<li>从第二项开始遍历，从当前项往前检查之前的项是否比当前项大，如果大则两项位置互换，然后重复此过程，直到检查完所有之前的项或者碰到小于当前项的项，即在之前的项中找到适合当前项的位置，并将项插入到这个合适的位置上</li>
<li>由于每一次项插入后的数列都是有序的，保证了当前项之前的项一定是有序的</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sort</span>(<span class="params">data = []</span>) </span>&#123;</span><br><span class="line">    data = <span class="built_in">Object</span>.assign([], data)</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">1</span>; i &lt; data.length; i++) &#123;</span><br><span class="line">      <span class="keyword">const</span> temp = data[i]</span><br><span class="line">      <span class="keyword">let</span> j = i</span><br><span class="line">      <span class="keyword">while</span> (j &gt; <span class="number">0</span> &amp;&amp; data[j - <span class="number">1</span>] &gt; temp) &#123;</span><br><span class="line">        data[j] = data[j - <span class="number">1</span>]</span><br><span class="line">        j -= <span class="number">1</span></span><br><span class="line">      &#125;</span><br><span class="line">      data[j] = temp</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> data</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2018/11/%E5%9F%BA%E6%9C%AC%E6%8E%92%E5%BA%8F%E6%B3%95%E6%A6%82%E8%A7%88/" data-id="cl7gxergd000ao4tl2ap75111" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-位置属性总结" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
            
	
		<a href="/blog/2018/11/%E4%BD%8D%E7%BD%AE%E5%B1%9E%E6%80%A7%E6%80%BB%E7%BB%93/" itemprop="url">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541667772983&di=af00751939d60be9d3d286a452aac2ef&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fa044ad345982b2b723f163ab3cadcbef76099b77.jpg" class="article-banner" style="object-fit: cover;"/>
        </a>
	



        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2018/11/%E4%BD%8D%E7%BD%AE%E5%B1%9E%E6%80%A7%E6%80%BB%E7%BB%93/">位置属性总结</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2018/11/%E4%BD%8D%E7%BD%AE%E5%B1%9E%E6%80%A7%E6%80%BB%E7%BB%93/">
            <time datetime="2018-11-06T15:11:18.000Z" itemprop="datePublished">2018-11-06</time>
        </a>
    </div>


                        
                        
                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            <p><!-- TOC -->

<ul>
<li><a href="#%E4%BD%8D%E7%BD%AE%E5%B1%9E%E6%80%A7%E6%80%BB%E7%BB%93">位置属性总结</a><ul>
<li><a href="#window">window</a></li>
<li><a href="#element">element</a></li>
<li><a href="#mouseevent">mouseEvent</a></li>
</ul>
</li>
</ul>
<!-- /TOC -->

<h1 id="位置属性总结"><a href="#位置属性总结" class="headerlink" title="位置属性总结"></a>位置属性总结</h1><!-- 测试环境：**chrome 70.0.3538.77** -->

<h2 id="window"><a href="#window" class="headerlink" title="window"></a>window</h2><blockquote>
<p>无offsetParent属性</p>
</blockquote>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight" target="_blank" rel="noopener">innerHeight</a><br>浏览器窗口的视口（viewport）高度（以像素为单位），如果存在水平滚动条，则包括它</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/outerHeight" target="_blank" rel="noopener">outerHeight</a><br>Window.outerHeight 获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）</li>
</ul>
<p><img src="https://developer.mozilla.org/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png" alt="inner"></p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth" target="_blank" rel="noopener">innerWidth</a><br>浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/outerWidth" target="_blank" rel="noopener">outerWidth</a><br>Window.outerWidth 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing borders/handles）</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen" target="_blank" rel="noopener">screen</a><ul>
<li>availHeight<br>屏幕中非固定占用空间<a href="%E5%9B%BA%E5%AE%9A%E5%8D%A0%E7%94%A8%E7%A9%BA%E9%97%B4%08%E6%8C%87%E7%9A%84%E6%98%AF%E7%B3%BB%E7%BB%9F%E5%8D%A0%E7%94%A8%E7%9A%84%E7%A9%BA%E9%97%B4%EF%BC%8C%E4%BE%8B%E5%A6%82macOS%E9%A1%B6%E9%83%A8%E7%9A%84%E8%8F%9C%E5%8D%95%E6%A0%8F%E6%88%96%E8%80%85windows%E5%BA%95%E9%83%A8%E7%9A%84%08%E4%BB%BB%E5%8A%A1%E6%A0%8F">^固定占用空间</a>的高度</li>
<li>availLeft<br>屏幕中非固定占用空间的左边离显示器左边的距离</li>
<li>availTop<br>屏幕中非固定占用空间的顶部离显示器顶部的距离</li>
<li>availWidth<br>屏幕中非固定占用空间的宽度</li>
<li>height<br>显示器的纵向分辨率</li>
<li>width<br>显示器的横向分辨率</li>
</ul>
</li>
<li>screenLeft<br>同screen.availLeft</li>
<li>screenTop<br>同screen.availTop</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/screenX" target="_blank" rel="noopener">screenX</a><br>返回浏览器左边界到操作系统桌面左边界的水平距离</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/screenY" target="_blank" rel="noopener">screenY</a><br>返回浏览器顶部距离系统桌面顶部的垂直距离</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX" target="_blank" rel="noopener">scrollX</a><br>返回文档/页面水平方向滚动的像素值</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY" target="_blank" rel="noopener">scrollY</a><br>返回文档在垂直方向已滚动的像素值</li>
</ul>
<!-- # documentElement

> offsetParent 为 null

+ clientHeight
+ clientLeft
+ clientTop
+ clientWidth
+ offsetHeight
+ offsetLeft
+ offsetTop
+ offsetWidth
+ scrollHeight
+ scrollLeft
+ scrollTop
+ scrollWidth -->

<!-- # body

> offsetParent 为 null

+ clientHeight
+ clientLeft
+ clientTop
+ clientWidth
+ offsetHeight
+ offsetLeft
+ offsetTop
+ offsetWidth
+ scrollHeight
+ scrollLeft
+ scrollTop
+ scrollWidth --></p>
            <p class="article-more-link">
                <a href="/blog/2018/11/%E4%BD%8D%E7%BD%AE%E5%B1%9E%E6%80%A7%E6%80%BB%E7%BB%93/#more">查看更多</a>
            </p>
        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2018/11/%E4%BD%8D%E7%BD%AE%E5%B1%9E%E6%80%A7%E6%80%BB%E7%BB%93/" data-id="cl7gxergd0009o4tl95js4221" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-页面缩放、逻辑像素与物理像素转化" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2018/10/%E9%A1%B5%E9%9D%A2%E7%BC%A9%E6%94%BE%E3%80%81%E9%80%BB%E8%BE%91%E5%83%8F%E7%B4%A0%E4%B8%8E%E7%89%A9%E7%90%86%E5%83%8F%E7%B4%A0%E8%BD%AC%E5%8C%96/">页面缩放、逻辑像素与物理像素转化</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2018/10/%E9%A1%B5%E9%9D%A2%E7%BC%A9%E6%94%BE%E3%80%81%E9%80%BB%E8%BE%91%E5%83%8F%E7%B4%A0%E4%B8%8E%E7%89%A9%E7%90%86%E5%83%8F%E7%B4%A0%E8%BD%AC%E5%8C%96/">
            <time datetime="2018-10-01T13:56:00.000Z" itemprop="datePublished">2018-10-01</time>
        </a>
    </div>


                        
                        
                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <h2 id="页面缩放"><a href="#页面缩放" class="headerlink" title="页面缩放"></a>页面缩放</h2><p>&lt;meta name=”viewport” content=”width=device-width, initial-scale=<code>scale</code>“/&gt;</p>
<p>物理屏：真正展现图像的屏幕，此屏上的像素称为物理像素<br>逻辑屏：css层面上布局的屏幕，此屏上的像素称为逻辑像素</p>
<p>以上的scale指的就是页面的缩放倍数，符合公式：</p>
<p>元素在物理屏上布局的宽度  = 元素在逻辑屏上布局的宽度 * scale * devicePixelRatio</p>
<p>逻辑像素 * devicePixelRatio = 物理像素（即实际用户看到的画面）</p>
<p>所以scale的计算公式：<br>scale = 元素在物理屏上布局的宽度 / (元素在逻辑屏上布局的宽度 * devicePixelRatio)</p>
<p>一般来说devicePixelRatio在pc上为1，手机端上常见的是2和3</p>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2018/10/%E9%A1%B5%E9%9D%A2%E7%BC%A9%E6%94%BE%E3%80%81%E9%80%BB%E8%BE%91%E5%83%8F%E7%B4%A0%E4%B8%8E%E7%89%A9%E7%90%86%E5%83%8F%E7%B4%A0%E8%BD%AC%E5%8C%96/" data-id="cl7gxergc0008o4tl5yu63mzq" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-浮点数的表示与计算" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2018/08/%E6%B5%AE%E7%82%B9%E6%95%B0%E7%9A%84%E8%A1%A8%E7%A4%BA%E4%B8%8E%E8%AE%A1%E7%AE%97/">浮点数的表示与计算</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2018/08/%E6%B5%AE%E7%82%B9%E6%95%B0%E7%9A%84%E8%A1%A8%E7%A4%BA%E4%B8%8E%E8%AE%A1%E7%AE%97/">
            <time datetime="2018-08-31T13:12:06.000Z" itemprop="datePublished">2018-08-31</time>
        </a>
    </div>


                        
                        
                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <p>[TOC]</p>
<h1 id="浮点数的表示与计算"><a href="#浮点数的表示与计算" class="headerlink" title="浮点数的表示与计算"></a>浮点数的表示与计算</h1><p>IEEE754中规定了64位浮点数的格式：</p>
<ul>
<li>符号位（1bit）,取值范围：[0,1]</li>
<li>指数位（11bit）,取值范围：[1,2046]</li>
<li>尾数位（52bit）,取值范围：[0,2^53-1]</li>
</ul>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/IEEE_754_Double_Floating_Point_Format.svg/1236px-IEEE_754_Double_Floating_Point_Format.svg.png" alt="内存中的存储格式"></p>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2018/08/%E6%B5%AE%E7%82%B9%E6%95%B0%E7%9A%84%E8%A1%A8%E7%A4%BA%E4%B8%8E%E8%AE%A1%E7%AE%97/" data-id="cl7gxergc0007o4tl9zugg0ta" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-git-flow-introduction" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2018/05/git-flow-introduction/">git-flow-introduction</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2018/05/git-flow-introduction/">
            <time datetime="2018-05-23T01:44:24.000Z" itemprop="datePublished">2018-05-23</time>
        </a>
    </div>


                        
                        
                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <p>Git 开发流程</p>
<p>开始一个新功能的开发 (Work on a Feature)</p>
<h2 id="1-建立新的分支"><a href="#1-建立新的分支" class="headerlink" title="1. 建立新的分支"></a>1. 建立新的分支</h2><p> $ git checkout -b feature/<your initial>-<feature name></p>
<blockquote>
<p>例如: feature/chb-add-wishlist 如果是bugfix, branch命名以bugfix开始 例如: bugfix/chb-some-user-cannot-login</p>
</blockquote>
<h2 id="2-开发功能并测试"><a href="#2-开发功能并测试" class="headerlink" title="2. 开发功能并测试"></a>2. 开发功能并测试</h2><h2 id="3-提交修改"><a href="#3-提交修改" class="headerlink" title="3. 提交修改"></a>3. 提交修改</h2><p>$ git push origin <feature branch name></p>
<h2 id="4-在github上创建pull-request-找人做代码审核（可跳过）"><a href="#4-在github上创建pull-request-找人做代码审核（可跳过）" class="headerlink" title="4.在github上创建pull request, 找人做代码审核（可跳过）"></a>4.在github上创建pull request, 找人做代码审核（可跳过）</h2><p>特别提醒：创建的pull request应是功能分支到develop分支</p>
<h2 id="5-审核（或自审）通过后，清理提交记录"><a href="#5-审核（或自审）通过后，清理提交记录" class="headerlink" title="5. 审核（或自审）通过后，清理提交记录"></a>5. 审核（或自审）通过后，清理提交记录</h2><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">git checkout develop </span><br><span class="line">git pull origin develop </span><br><span class="line">git checkout &lt;feature branch name&gt; </span><br><span class="line">git rebase -i develop </span><br><span class="line">git push origin &lt;feature branch name&gt; -f</span><br></pre></td></tr></table></figure>
<p>目标：将所有的commits整理成一个或者几个比较重要的commit，并确保新的代码会出现在develop分支现有代码之后，以保持提交历史的整洁性</p>
<p>在这一步可能会出现conflicts, 需要人工解决</p>
<p>注：前三步操作可以用git alias来简化, 需要在~/.gitconfig配置一下git的alias</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> ~/.gitconfig [<span class="built_in">alias</span>]   sync = <span class="string">"!f() &#123; echo Syncing <span class="variable">$1</span> with develop &amp;&amp; git checkout develop &amp;&amp; git pull origin develop &amp;&amp; git checkout <span class="variable">$1</span> &amp;&amp; git rebase -i develop; &#125;; f"</span></span></span><br><span class="line"><span class="meta">$</span><span class="bash"> git sync &lt;feature branch name&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="6-在github上merge-pull-request并删除分支"><a href="#6-在github上merge-pull-request并删除分支" class="headerlink" title="6. 在github上merge pull request并删除分支"></a>6. 在github上merge pull request并删除分支</h2><h2 id="7-终结这个功能分支"><a href="#7-终结这个功能分支" class="headerlink" title="7. 终结这个功能分支"></a>7. 终结这个功能分支</h2><p> $ git checkout develop <strong>&amp;&amp;</strong> git pull origin develop <strong>&amp;&amp;</strong> git branch -d <feature branch name></p>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2018/05/git-flow-introduction/" data-id="cl7gxerga0005o4tl66u0e3px" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-使用过的工具和库" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2018/05/%E4%BD%BF%E7%94%A8%E8%BF%87%E7%9A%84%E5%B7%A5%E5%85%B7%E5%92%8C%E5%BA%93/">使用过的工具和库</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2018/05/%E4%BD%BF%E7%94%A8%E8%BF%87%E7%9A%84%E5%B7%A5%E5%85%B7%E5%92%8C%E5%BA%93/">
            <time datetime="2018-05-21T20:57:22.000Z" itemprop="datePublished">2018-05-21</time>
        </a>
    </div>


                        
                        
                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <h1 id="工具"><a href="#工具" class="headerlink" title="工具"></a>工具</h1><table>
<thead>
<tr>
<th>名称/地址</th>
<th>描述</th>
<th>版本</th>
<th>minzipped</th>
</tr>
</thead>
<tbody><tr>
<td><a href="https://github.com/RubaXa/Sortable" target="_blank" rel="noopener">sortable</a></td>
<td>前端拖拽功能组件</td>
<td>1.9.0</td>
<td>9.3KB</td>
</tr>
<tr>
<td><a href="https://github.com/YMFE/yapi" target="_blank" rel="noopener">yapi</a></td>
<td>提供mock服务的系统</td>
<td></td>
<td>–</td>
</tr>
<tr>
<td><a href="https://github.com/handsontable/handsontable" target="_blank" rel="noopener">handsontable</a></td>
<td>类Excel sheet视图工具</td>
<td>7.0.3</td>
<td>310.5KB</td>
</tr>
<tr>
<td><a href="https://github.com/ilyashubin/scrollbooster" target="_blank" rel="noopener">scrollbooster</a></td>
<td>点击拖拽表格左右滑动，可以优化window下横向滚动条的用户体验</td>
<td></td>
<td>2.7KB</td>
</tr>
<tr>
<td><a href="https://github.com/liriliri/eruda" target="_blank" rel="noopener">eruda</a></td>
<td>在手机端模拟browser的devtool进行调试</td>
<td>1.5.5</td>
<td>123.8KB</td>
</tr>
<tr>
<td><a href="https://github.com/egoist/docute" target="_blank" rel="noopener">docute</a></td>
<td>通过markdown生成单页应用</td>
<td></td>
<td>–</td>
</tr>
<tr>
<td><a href="https://github.com/metafizzy/infinite-scroll" target="_blank" rel="noopener">infinite-scroll</a></td>
<td>jQuery无限滚动</td>
<td>3.0.6</td>
<td>5.2KB</td>
</tr>
<tr>
<td><a href="https://github.com/GoogleChrome/puppeteer" target="_blank" rel="noopener">Puppeteer</a></td>
<td>chrome出品的headless Node Api</td>
<td></td>
<td>–</td>
</tr>
<tr>
<td><a href="https://github.com/sarcadass/granim.js" target="_blank" rel="noopener">granim</a></td>
<td>背景渐变插件</td>
<td>2.0.0</td>
<td>4.7KB</td>
</tr>
<tr>
<td><a href="https://github.com/ai/nanoid" target="_blank" rel="noopener">nanoid</a></td>
<td>唯一id生成器</td>
<td>2.0.3</td>
<td>286B</td>
</tr>
<tr>
<td><a href="https://github.com/ianstormtaylor/superstruct" target="_blank" rel="noopener">superstruct</a></td>
<td>简易可自定义数据类型验证器</td>
<td>0.6.1</td>
<td>3.2KB</td>
</tr>
<tr>
<td><a href="https://github.com/Shopify/draggable" target="_blank" rel="noopener">draggable</a></td>
<td>拖拽库</td>
<td>1.0.0-beta.8</td>
<td>11.8KB</td>
</tr>
<tr>
<td><a href="https://github.com/bevacqua/dragula" target="_blank" rel="noopener">dragula</a></td>
<td>拖拽库</td>
<td>3.7.2</td>
<td>3.7KB</td>
</tr>
<tr>
<td><a href="https://github.com/webpackmonitor/webpackmonitor" target="_blank" rel="noopener">webpackmonitor</a></td>
<td>webpack打包后的资源查看器</td>
<td></td>
<td>–</td>
</tr>
<tr>
<td><a href="https://github.com/webpack-contrib/webpack-bundle-analyzer" target="_blank" rel="noopener">webpack-bundle-analyzer</a></td>
<td>webpack打包后的资源查看器</td>
<td></td>
<td>–</td>
</tr>
<tr>
<td><a href="https://github.com/ApoorvSaxena/lozad.js" target="_blank" rel="noopener">lozad</a></td>
<td>图片和iframe懒加载</td>
<td>1.9.0</td>
<td>972B</td>
</tr>
<tr>
<td><a href="https://github.com/GoogleChrome/workbox" target="_blank" rel="noopener">workbox</a></td>
<td>Chrome出品的PWA库</td>
<td>4.3.1</td>
<td>802B</td>
</tr>
<tr>
<td><a href="https://github.com/commitizen/cz-cli" target="_blank" rel="noopener">commitizen</a></td>
<td>git commit 格式化message</td>
<td></td>
<td>–</td>
</tr>
<tr>
<td><a href="https://github.com/sindresorhus/conf" target="_blank" rel="noopener">conf</a></td>
<td>在本地磁盘中创建配置文件</td>
<td></td>
<td>–</td>
</tr>
<tr>
<td><a href="https://github.com/hq229075284/Numeral-js" target="_blank" rel="noopener">Numeral-js</a></td>
<td>对数字进行格式化及简单的加减操作</td>
<td>2.0.6</td>
<td>3.8KB</td>
</tr>
<tr>
<td><a href="https://github.com/hammerjs/hammer.js" target="_blank" rel="noopener">hammer.js</a></td>
<td>手势库</td>
<td>2.0.8</td>
<td>6.9KB</td>
</tr>
<tr>
<td><a href="https://github.com/juliangarnier/anime" target="_blank" rel="noopener">anime</a></td>
<td>动画库</td>
<td>3.0.1</td>
<td>6.8KB</td>
</tr>
<tr>
<td><a href="https://www.npmjs.com/package/marked" target="_blank" rel="noopener">marked</a></td>
<td>markdown转码器</td>
<td>0.6.3</td>
<td>7.7kB</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody></table>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2018/05/%E4%BD%BF%E7%94%A8%E8%BF%87%E7%9A%84%E5%B7%A5%E5%85%B7%E5%92%8C%E5%BA%93/" data-id="cl7gxergb0006o4tl389f0yl5" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-webpack针对循环引用以及赋值export的处理注意事项" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
            
	
		<a href="/blog/2018/03/webpack%E9%92%88%E5%AF%B9%E5%BE%AA%E7%8E%AF%E5%BC%95%E7%94%A8%E4%BB%A5%E5%8F%8A%E8%B5%8B%E5%80%BCexport%E7%9A%84%E5%A4%84%E7%90%86%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/" itemprop="url">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1520601513447&di=f808165460d1a50f4d6e2da81fff2ea5&imgtype=0&src=http%3A%2F%2Fwww.33lc.com%2Farticle%2FUploadPic%2F2012-8%2F2012831461959667.jpg" class="article-banner" style="object-fit: cover;"/>
        </a>
	



        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2018/03/webpack%E9%92%88%E5%AF%B9%E5%BE%AA%E7%8E%AF%E5%BC%95%E7%94%A8%E4%BB%A5%E5%8F%8A%E8%B5%8B%E5%80%BCexport%E7%9A%84%E5%A4%84%E7%90%86%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/">webpack针对循环引用以及赋值export的处理注意事项</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2018/03/webpack%E9%92%88%E5%AF%B9%E5%BE%AA%E7%8E%AF%E5%BC%95%E7%94%A8%E4%BB%A5%E5%8F%8A%E8%B5%8B%E5%80%BCexport%E7%9A%84%E5%A4%84%E7%90%86%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/">
            <time datetime="2018-03-08T22:04:19.000Z" itemprop="datePublished">2018-03-08</time>
        </a>
    </div>


                        
                        
                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            <p><!-- TOC -->

<ul>
<li><a href="#webpack%E6%89%93%E5%8C%85%E7%9B%B8%E4%BA%92%E5%BC%95%E7%94%A8%E7%9A%84%E6%A8%A1%E5%9D%97">webpack打包相互引用的模块</a><ul>
<li><a href="#%E7%A4%BA%E4%BE%8B%E9%A1%B9%E7%9B%AE">示例项目</a></li>
<li><a href="#%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98">遇到的问题</a></li>
<li><a href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BC%9A%E5%87%BA%E7%8E%B0%E8%BF%99%E6%A0%B7%E7%9A%84%E9%97%AE%E9%A2%98">为什么会出现这样的问题</a></li>
<li><a href="#%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3">如何解决</a></li>
</ul>
</li>
</ul>
<!-- /TOC -->

<h1 id="webpack打包相互引用的模块"><a href="#webpack打包相互引用的模块" class="headerlink" title="webpack打包相互引用的模块"></a>webpack打包相互引用的模块</h1><h2 id="示例项目"><a href="#示例项目" class="headerlink" title="示例项目"></a>示例项目</h2><p>(<a href="https://github.com/hq229075284/blog-example-assets/tree/master/webpack%E9%92%88%E5%AF%B9%E5%BE%AA%E7%8E%AF%E5%BC%95%E7%94%A8%E4%BB%A5%E5%8F%8A%E8%B5%8B%E5%80%BCexport%E7%9A%84%E5%A4%84%E7%90%86%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" target="_blank" rel="noopener">github</a>)</p>
<h2 id="遇到的问题"><a href="#遇到的问题" class="headerlink" title="遇到的问题"></a>遇到的问题</h2><p>在有2个或2个以上的文件之间的相互依赖关系构成闭环的时候，有时会出现<code>Can't read Property 'xxx' of undefined</code>或者<code>(0,xxx) is not a function</code>这类的错误，比如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">示例项目中的src&#x2F;index.js引用src&#x2F;a.js,而src&#x2F;a.js中也引用了src&#x2F;index.js</span><br></pre></td></tr></table></figure>

<h2 id="为什么会出现这样的问题"><a href="#为什么会出现这样的问题" class="headerlink" title="为什么会出现这样的问题"></a>为什么会出现这样的问题</h2></p>
            <p class="article-more-link">
                <a href="/blog/2018/03/webpack%E9%92%88%E5%AF%B9%E5%BE%AA%E7%8E%AF%E5%BC%95%E7%94%A8%E4%BB%A5%E5%8F%8A%E8%B5%8B%E5%80%BCexport%E7%9A%84%E5%A4%84%E7%90%86%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/#more">查看更多</a>
            </p>
        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2018/03/webpack%E9%92%88%E5%AF%B9%E5%BE%AA%E7%8E%AF%E5%BC%95%E7%94%A8%E4%BB%A5%E5%8F%8A%E8%B5%8B%E5%80%BCexport%E7%9A%84%E5%A4%84%E7%90%86%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/" data-id="cl7gxerg70004o4tl80agc8fq" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>



    <article id="post-react中Context的传递" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 itemprop="name">
            <a class="article-title" href="/blog/2017/08/react%E4%B8%ADContext%E7%9A%84%E4%BC%A0%E9%80%92/">react中Context的传递</a>
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2017/08/react%E4%B8%ADContext%E7%9A%84%E4%BC%A0%E9%80%92/">
            <time datetime="2017-08-22T00:58:52.000Z" itemprop="datePublished">2017-08-22</time>
        </a>
    </div>


                        
                        
                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            <p><p>ccontext的传递方向是由定义了根数据源的组件向子组件传递，父级</p>
<ul>
<li>通过getChildContext（Class）在context上定义要传递给子级的数据</li>
<li>通过组件（Class）的childContextTypes定义传递给子级数据的数据类型</li>
</ul>
<p>上上级组件传递的context数据可以被上级组件同key的context数据所替换，比如：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// App</span></span><br><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"><span class="keyword">import</span> PropTypes <span class="keyword">from</span> <span class="string">"prop-types"</span>;</span><br><span class="line"><span class="keyword">import</span> Parent <span class="keyword">from</span> <span class="string">"./Parent"</span>;</span><br><span class="line"><span class="keyword">import</span> Child <span class="keyword">from</span> <span class="string">"./Child"</span>;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  getChildContext() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="keyword">from</span>: <span class="string">"this is from App"</span></span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"App_Context--&gt;"</span>, <span class="keyword">this</span>.context);</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div className=<span class="string">"container"</span>&gt;</span><br><span class="line">        &lt;Parent&gt;</span><br><span class="line">          &lt;Child /&gt;</span><br><span class="line">        &lt;<span class="regexp">/Parent&gt;</span></span><br><span class="line"><span class="regexp">      &lt;/</span>div&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">App.childContextTypes = &#123;</span><br><span class="line">  <span class="keyword">from</span>: PropTypes.string</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">App.contextTypes = &#123;</span><br><span class="line">  <span class="keyword">from</span>: PropTypes.string,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> App</span><br></pre></td></tr></table></figure></p>
            <p class="article-more-link">
                <a href="/blog/2017/08/react%E4%B8%ADContext%E7%9A%84%E4%BC%A0%E9%80%92/#more">查看更多</a>
            </p>
        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2017/08/react%E4%B8%ADContext%E7%9A%84%E4%BC%A0%E9%80%92/" data-id="cl7gxerg50003o4tl46lb9n7e" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
</article>


</section>
            
                
<aside id="sidebar">
   
        
    <div class="widget-wrap">
        <h3 class="widget-title">最新文章</h3>
        <div class="widget">
            <ul id="recent-post" class="">
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/blog/2022/08/notes/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/blog/2022/08/notes/" class="title">notes</a></p>
                            <p class="item-date"><time datetime="2022-08-31T01:14:15.551Z" itemprop="datePublished">2022-08-31</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/blog/2022/04/css-grid/" class="thumbnail">
    
    
        <span style="background-image:url(https://s1.ax1x.com/2022/04/15/L8yHat.jpg)" alt="Grid" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/blog/categories/css/">css</a></p>
                            <p class="item-title"><a href="/blog/2022/04/css-grid/" class="title">Grid</a></p>
                            <p class="item-date"><time datetime="2022-04-15T16:11:20.000Z" itemprop="datePublished">2022-04-15</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/blog/2022/04/css%E4%BC%98%E5%85%88%E7%BA%A7/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/blog/categories/css/">css</a></p>
                            <p class="item-title"><a href="/blog/2022/04/css%E4%BC%98%E5%85%88%E7%BA%A7/" class="title">css选择器和style属性的权值计算和比较</a></p>
                            <p class="item-date"><time datetime="2022-04-15T16:11:10.000Z" itemprop="datePublished">2022-04-15</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/blog/2022/01/border-image-slice/" class="thumbnail">
    
    
        <span style="background-image:url(https://www.wangzhanchengxu.com/uploadfile/2017/0325/20170325114208581.gif)" alt="border-image-slice" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/blog/categories/css/">css</a></p>
                            <p class="item-title"><a href="/blog/2022/01/border-image-slice/" class="title">border-image-slice</a></p>
                            <p class="item-date"><time datetime="2022-01-13T16:55:16.000Z" itemprop="datePublished">2022-01-13</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/blog/2021/12/css%E4%B8%BB%E9%A2%98%E5%8C%96/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/blog/2021/12/css%E4%B8%BB%E9%A2%98%E5%8C%96/" class="title">css主题化</a></p>
                            <p class="item-date"><time datetime="2021-12-01T16:10:24.000Z" itemprop="datePublished">2021-12-01</time></p>
                        </div>
                    </li>
                
            </ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">分类</h3>
        <div class="widget">
            <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/blog/categories/css/">css</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/shell/">shell</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/typescript/">typescript</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/web-api/">web-api</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/web%E5%AE%89%E5%85%A8/">web安全</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E5%85%BC%E5%AE%B9%E6%80%A7/">兼容性</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E8%BF%90%E7%BB%B4/">运维</a><span class="category-list-count">2</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">归档</h3>
        <div class="widget">
            <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/08/">八月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/04/">四月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/01/">一月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/12/">十二月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/05/">五月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/04/">四月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/11/">十一月 2020</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/06/">六月 2020</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/05/">五月 2020</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/01/">一月 2020</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2019/06/">六月 2019</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2019/02/">二月 2019</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2018/11/">十一月 2018</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2018/10/">十月 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2018/08/">八月 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2018/05/">五月 2018</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2018/03/">三月 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2017/08/">八月 2017</a><span class="archive-list-count">1</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签</h3>
        <div class="widget">
            <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css/" rel="tag">css</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/docker/" rel="tag">docker</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es/" rel="tag">es</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/glob/" rel="tag">glob</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/web-api/" rel="tag">web-api</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E5%85%BC%E5%AE%B9%E6%80%A7/" rel="tag">兼容性</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E8%AE%A1%E7%AE%97%E5%99%A8%E5%8E%9F%E7%90%86/" rel="tag">计算器原理</a><span class="tag-list-count">1</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签云</h3>
        <div class="widget tagcloud">
            <a href="/blog/tags/css/" style="font-size: 20px;">css</a> <a href="/blog/tags/docker/" style="font-size: 15px;">docker</a> <a href="/blog/tags/es/" style="font-size: 10px;">es</a> <a href="/blog/tags/es6/" style="font-size: 10px;">es6</a> <a href="/blog/tags/glob/" style="font-size: 10px;">glob</a> <a href="/blog/tags/web-api/" style="font-size: 10px;">web-api</a> <a href="/blog/tags/%E5%85%BC%E5%AE%B9%E6%80%A7/" style="font-size: 10px;">兼容性</a> <a href="/blog/tags/%E8%AE%A1%E7%AE%97%E5%99%A8%E5%8E%9F%E7%90%86/" style="font-size: 10px;">计算器原理</a>
        </div>
    </div>

    
        
    <div class="widget-wrap widget-list">
        <h3 class="widget-title">链接</h3>
        <div class="widget">
            <ul>
                
                    <li>
                        <a href="http://hexo.io" target="_blank" rel="noopener">Hexo</a>
                    </li>
                
            </ul>
        </div>
    </div>


    
    <div id="toTop" class="fa fa-angle-up"></div>
</aside>

            
        </div>
        <footer id="footer">
    <div class="outer">
        <div id="footer-info" class="inner">
            &copy; 2022 HanQ<br>
            Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>. Theme by <a href="http://github.com/ppoffice" target="_blank" rel="noopener">PPOffice</a>
        </div>
    </div>
</footer>
        


    
        
<script src="/blog/libs/lightgallery/js/lightgallery.min.js"></script>

        
<script src="/blog/libs/lightgallery/js/lg-thumbnail.min.js"></script>

        
<script src="/blog/libs/lightgallery/js/lg-pager.min.js"></script>

        
<script src="/blog/libs/lightgallery/js/lg-autoplay.min.js"></script>

        
<script src="/blog/libs/lightgallery/js/lg-fullscreen.min.js"></script>

        
<script src="/blog/libs/lightgallery/js/lg-zoom.min.js"></script>

        
<script src="/blog/libs/lightgallery/js/lg-hash.min.js"></script>

        
<script src="/blog/libs/lightgallery/js/lg-share.min.js"></script>

        
<script src="/blog/libs/lightgallery/js/lg-video.min.js"></script>

    
    
        
<script src="/blog/libs/justified-gallery/jquery.justifiedGallery.min.js"></script>

    
    



<!-- Custom Scripts -->

<script src="/blog/js/main.js"></script>


    </div>
</body>
</html>